lundi 27 août 2018

[UWP/XAML] How to customize your NavigationView and add NavigationViewItem next to the Settings button

In this tutorial we are going to see how to add NavigationViewItems next to your Settings button in your NavigationView view.

First we need to get the Template of the NavigationView, Document Outline => Your NavigationView => Edit Template => edit a Copy.

Here is mine:


Look for the style that has a target type = Navigation View, here is mine:


 <Style x:Key="NavigationViewStyle1" TargetType="NavigationView">

Next we will need to find the NavigationViewItem that holds our settings button:


<NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="7">
               <NavigationViewItem.Icon>
                      <SymbolIcon Symbol="Setting" />
               </NavigationViewItem.Icon>
</NavigationViewItem>


Now we are going to add our 2 new buttons, first we are going to add s stackpanel and move the property Grid.Row=7 to it as follows:



<StackPanel Grid.Row="7">
   <NavigationViewItem x:Name="AddedNavItemOne"    Tag="MyViewOne">
  <NavigationViewItem.Icon>
   <SymbolIcon Symbol="World" />
  </NavigationViewItem.Icon>
</NavigationViewItem> <NavigationViewItem x:Name="AddedNavItemTwo" Tag="MyViewTwo">
   <NavigationViewItem.Icon>
   <SymbolIcon Symbol="Search" />
  </NavigationViewItem.Icon>
</NavigationViewItem> <NavigationViewItem x:Name="SettingsNavPaneItem"> <NavigationViewItem.Icon> <SymbolIcon Symbol="Setting" /> </NavigationViewItem.Icon> </NavigationViewItem> </StackPanel>

Now we need to be able to handle the Click actions of these 2 new NavigationViewItem.

We are going to create a class that inherits from NavigationView that will be called ExtendedNavigationView and we arer going to look for our 2 buttons and set handlers on the Tapped events as follows:

_navItemOne= GetTemplateChild("AddedNavItemOne") as NavigationViewItem;
            
//addign events
_navItemOne.Tapped += NavItem_Tapped;

The full class will look as follows:

 public class ExtendedNavigationView : NavigationView
    {
        private NavigationViewItem _navItemOne;
        private NavigationViewItem _navItemTwo;

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            SetupExtraNavItems();
        }

        private void SetupExtraNavItems()
        {
            //check to see if not already set
            if (_navItemOne!= null)
            {
                //unload events
                _navItemOne.Tapped -= NavItem_Tapped;
               
            }

            if (_navItemTwo!= null)
            {
                _navItemTwo.Tapped -= NavItem_Tapped;
            }

            _navItemOne= GetTemplateChild("AddedNavItemOne") as NavigationViewItem;
            _navItemTwo = GetTemplateChild("AddedNavItemTwo") as NavigationViewItem;           

            if (_navItemOne== null || _navItemTwo== null)
            {
                return;
            }

            //addign events
            _navItemOne.Tapped += NavItem_Tapped;
            _navItemTwo.Tapped += NavItem_Tapped;            
        }
        

        private void NavItem_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            var NavView = (sender as NavigationViewItem).Tag;
            //navigate to item
        }


And there you have it you have customized your NavigationView with 2 new NavigationViewItems above the Settings button.

Happy Coding.




mercredi 1 août 2018

[UWP/XAML] using Microsoft.Toolkit for Implicit animations using ScalarAnimation, OpacityAnimation, TranslationAnimation

Do you hate having to use Compositor?


_compositor = new Compositor();
_root = ElementCompositionPreview.GetElementVisual(RootGrid);

Well Microsoft.Toolkit.Uwp.UI.Animations is here to save you (and me).  The toolkit has added implicit animation which will allow you to easily add animations to your elements.  You wont need to use Storyboard animation!

In this example we are going to see how to:

  •  Add a translation to an element
  • Show and hide an element using Opacity
  • Scale an element
The advantage of using an Implicit animation is that it can for example be execute when you change the visibility of a component using:
 <animations:Implicit.ShowAnimations>

Or
 <animations:Implicit.HideAnimations>

Animations

To move an element in your app using implicit animation you have 2 options either you use ScalarAnimation or TranslationAnimation.

TranslationAnimation

Has 3 main properties that you are going to want to set:
  • From
  • To
  • Duration
From and To are based on the x-y-z axis
Duration uses a h:m:s format

 <animations:TranslationAnimation
                    From="500,300,0"
                    To="0"
                    Duration="0:0:1" />

This means we are going to add 500 to the x position, 300 to the y postion and 0 to the z. The To=0 will take the element from its current position and the translation will take 1 second.


OpacityAnimation 

Same as the translation this also takes 3 properties, however the From and To only takes one value as the opacity property is only based on one value.



<animations:OpacityAnimation
                    From="0"
                    To="1"
                    Duration="0:0:2" />


ScalarAnimation

If you wish to have more control on your animation you can also use ScalarAnimation which will allow you to more precisely (I find) to set the values to the property you wish to change.



            <animations:ScalarAnimation
                    Target="Translation.Y"
                    From="100"
                    To="0"
                    Duration="0:0:1"/>


First you need to set your Target, which is the property you are going to want to change.  Then depending on your target like the other animations you will set the From, To, Duration


Combining Animations

Now we are going to combine 2 animations using the ShowAnimations and HideAnimations.  We will use ScalarAnimation and OpacityAnimation to move and change the opacity of our object.

Here is the full XAML:

 <Button Click="Button_Click" Content="Hit me" />
        <Rectangle
            x:Name="MyRec"
            Grid.Row="0"
            Height="45"
            Margin="0,0,0,0"
            VerticalAlignment="Bottom"
            Fill="Red"
            Visibility="Collapsed">
            <animations:Implicit.ShowAnimations>
                <!--<animations:TranslationAnimation
                    From="100,0,0"
                    To="0,0,0"
                    Duration="0:0:1" />-->
                <animations:ScalarAnimation
                    Target="Translation.Y"
                    From="100"
                    To="0"
                    Duration="0:0:1">                  
                </animations:ScalarAnimation>

                <animations:OpacityAnimation
                    From="0"
                    To="1"
                    Duration="0:0:2" />
            </animations:Implicit.ShowAnimations>

            <animations:Implicit.HideAnimations>
                <animations:OpacityAnimation
                    From="1"
                    To="0"
                    Duration="0:0:2" />

                <animations:ScalarAnimation
                    Target="Translation.Y"
                    From="0"
                    To="100"
                    Duration="0:0:1">                
                </animations:ScalarAnimation>

                <!--<animations:TranslationAnimation
                    From="0,0,0"
                    To="100,0,0"
                    Duration="0:0:1" />-->
            </animations:Implicit.HideAnimations>
        </Rectangle>

C# Code:


private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (MyRec != null)
            {
                MyRec.Visibility = MyRec.Visibility == Visibility.Collapsed ? Visibility.Visible : Visibility.Collapsed;
            }
        }

Happy Coding.