Template 10:Get the splash screen like the course in MVA - xaml

I just completed the course on template 10 in mva. Now I am working on this app and would like it to have the splash screen like this(of course the logo can be changed). Where should I get started to code(any tutorial)? Or if there's a sample code available.
Screenshots:

I think it uses an extended splash screen. The extended splash screen in UWP is the same as it in a Windows 8.1 app. You can start with How to extend the splash screen (XAML), there is a 8.1 sample in this document, and you can also refer to the official UWP Splash screen sample.
And from your picture, there is a circular ProgressBar, to create such a PrgressBar, there are several methods, for example here you can refer to [UWP] - Circular Progress Bar.
Update:
It's quite easy, downloaded your posted project in the comment, there is a usercontrol named "RoundProgressControl", in this usercontrol, you can put a Image inside it like this:
<Grid x:Name="TheGrid" Width="28" Height="28" Margin="0,0,0,0" Background="Transparent">
<Path x:Name="ThePath" Fill="Transparent" Stroke="#ff999999" StrokeThickness="4" StrokeDashCap="Flat">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="12,24" x:Name="ThePathFigure">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment x:Name="TheSegment" Size="12,12" IsLargeArc="False" SweepDirection="Clockwise" Point="12,24" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
<Image Source="Assets/E1.png" Width="30" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
I put a image source named "E1.png" in the Assets folder of the project, you can replace it with your own image. You can also modify the size of the Image by setting the Width and Height property.

Related

NavigationView icons + text in compact mode

I'm trying to accomplish something similar to the image below where in compact mode you have the icon and the text displayed under it.
I'm not that familiar with modifying the underlying template for the NavigationView to make this work. Can you give me an advice on how to do this?
The code for the NavigationView is pretty much the default one:
<winui:NavigationView
x:Name="navigationView"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
IsBackButtonVisible="Collapsed"
IsBackEnabled="False"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
PaneDisplayMode="LeftCompact"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}">
<winui:NavigationView.MenuItems>
<winui:NavigationViewItem x:Uid="Shell_Main" helpers:NavHelper.NavigateTo="views:MainPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_WorkOrders" helpers:NavHelper.NavigateTo="views:WorkOrdersPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Materials" helpers:NavHelper.NavigateTo="views:MaterialsPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<winui:NavigationViewItem x:Uid="Shell_Documentation" helpers:NavHelper.NavigateTo="views:DocumentationPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="" />
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="ItemInvoked">
<ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
<Grid>
<Frame x:Name="shellFrame" />
</Grid>
</winui:NavigationView>
NavigationView icons + text in compact mode
it's hard to make interface like the screenshot that you mentioned above, you need to edit the default NavigationViewItemPresenter style, and set icon above and content bottom.
For making navigation like above, we suggest you custom side navigation with SplitView to replace default NavigationView. and set ListView as pane content. Then you could design the nav item flexibly by customizing ItemTemplate .
For more detail please refer to Xaml-Controls-Gallery here.

Draggable Images Xamarin

I am trying to create a user interface where a user can drag an image around the screen atop a background image. Currently the DraggableImage is being moved around with some sliders that change DraggableBounds in the view model.
<AbsoluteLayout>
<Image Source="{Binding DraggableImage, Mode=TwoWay}" AbsoluteLayout.LayoutBounds="{Binding DraggableBounds}" />
<Image Source="{Binding FrameImage, Mode=TwoWay}" Aspect="AspectFit" WidthRequest="1300" HeightRequest="500"/>
</AbsoluteLayout>
I've tried using the Pan Gesture that's on Microsofts Xamarin docs with little success. I'm not trying to pan within an image but move a smaller image over a larger. Is there an existing pattern to solve this?

Common ToolBar in UWP c++

I am attempting to make a multipage app and would like to use a common navigation toolbar across all pages. The page includes:
<Page.TopAppBar>
<AppBar >
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Page.TopAppBar>
In App.xaml I can define the AppBar that goes into the Page.TopAppBar:
<Application.Resources>
<AppBar x:Key="CommonAppBar" x:Name="AppBarCommon">
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Application.Resources>
But how can I use this AppBar defination in the Page xaml?
You can use the Frame control on one page and show another your pages inside that frame. Then you can add an AppBar to this page.
By the way, the AppBarButton is the button that is used inside an AppBar, not StackPanel and Buttons (your approach will still work, but if you expect the same behaviour and look as in other UWP apps, it's easier to use AppBarButtons).

Disabling snap points/bounce back on ScrollViewer in XAML

I have a Grid with an Image inside a ScrollViewer. The user needs to be able to zoom in and out of the image. The problem is when I zoom the scrollviewer seems to snap back to the left side of the image although I want the viewer to stay at the zoomed position. The XAML code looks like this
<ScrollViewer Name="ScrollViewer" HorizontalSnapPointsType="None" VerticalSnapPointsType="None" ZoomSnapPointsType="None">
<Grid x:Name="RenderedGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image x:Name="RenderedImage" Stretch="Fill" />
<canvas:CanvasControl Name="DrawingCanvas" Draw="CanvasControl_Draw" ClearColor="Transparent"/>
</Grid>
</ScrollViewer>
I thought it would be enough with setting the SnapPointType to "None", but that doesn't seem to work.
I wrote a blog post exactly about this issue: Why is my zoomable ScrollViewer snapping the image to the left?
The first part of the problem is the ScrollViewer itself, it needs the HorizontalScrollBarVisibility and VerticalScrollBarVisibility set to Auto.
<ScrollViewer ZoomMode="Enabled"
MinZoomFactor="1"
MaxZoomFactor="4"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
For that to really work, you'll need to limit the Image size to some width/height, like this:
<Image Source="{Binding ImageUri}"
MaxWidth="{Binding DataContext.PageWidth, ElementName=MyPage}"
MaxHeight="{Binding DataContext.PageHeight, ElementName=MyPage}"/>
You can find more details in my blog post, and full source code on GitHub.

Windows Phone 8.1 XAML Image inside ToggleButton adds mystery padding

I'm working with a toggle button and rather than show text I want to show an image so I have this:
<ToggleButton Grid.Column="1" IsChecked="true" MinWidth="50" MinHeight="0" BorderThickness="0" HorizontalAlignment="Center">
<Image Source="ms-appx:///Assets/Icons/phonebutton.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</ToggleButton>
I have the transform to make the image a bit smaller so it's "inside" the button instead of filling it.
However, no matter what I do the button has a large padding around the image, even though the image itself has no margins or padding. I've set margin=0 on everything but the ToggleButton insists on putting space around the image, so the button is larger than it needs to be and cuts off inside the grid row it's in (which has a height="*")
I want the toggle button to "shrink" to fit in the row but still show the full image inside ...
while typing this the autosuggest found this link ToggleButton does not fill the area(windows phone) and by adding the style PhoneTouchTargetOverhang it does look better but then cuts off the image at the bottom unless I add negative padding to the togglebutton.
Anyone have any idea what I'm doing wrong?
Is there any way to disable it?
I have added the following margin to an image of 512x512:
<Image Source="/Assets/award4.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="-100,0,-100,0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
And it fits centered