how can I do a SideIn Panel

Javier R 211 Reputation points
2020-05-12T11:10:32.393+00:00

how can I make a SideIn Panel? exit the right of the app for a viewed options :custom-panels-overview

according to this could be done or for this it's better to use splitview.

Universal Windows Platform (UWP)
{count} votes

7 answers

Sort by: Most helpful
  1. Daniele 1,996 Reputation points
    2020-05-12T14:13:07.24+00:00

    SplitView with your controls. I replaced Width with OpenPaneLength, and changed HorizontalAlignment to Stretch. The Grid with text "Opciones" and "Papel cuadriculado" is inside SplitView.Pane element, and the ScrollViewer is now the content of the SplitView.

    <SplitView x:Name="SplitView"
               OpenPaneLength="300"
               Background="CadetBlue"
               DisplayMode="Overlay"
               CompactPaneLength="48"
               PanePlacement ="Right"
               HorizontalAlignment="Stretch"
               IsPaneOpen="False" >
        <SplitView.Pane>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="170"/>
                    <ColumnDefinition Width="90"/>
                </Grid.ColumnDefinitions>
    
                <TextBlock Text="Opciones" Grid.Row="1" Grid.Column="0" Margin="10,0,0,0"/>
                <TextBlock Text="Papel cuadriculado"  Grid.Row="3" Grid.Column="0"   Margin="10,0,0,0"/>
            </Grid>
        </SplitView.Pane>
        <ScrollViewer x:Name="canvasScroll"
                      Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
                      VerticalScrollBarVisibility="Auto"
                      HorizontalScrollBarVisibility="Auto"
                      ZoomMode="Enabled">
            <Grid Background="{StaticResource InkCanvasBackground}"
                  Width="{Binding ElementName=inkCanvas, Path=Width}"
                  Height="{Binding ElementName=IninkCanvaskCanvas, Path=Height}">
                <InkCanvas x:Name="inkCanvas"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Stretch" />
                <Canvas x:Name="selectionCanvas"
                        Width="{Binding ElementName=inkCanvas, Path=Width}"
                        Height="{Binding ElementName=inkCanvas, Path=Height}" />
            </Grid>
        </ScrollViewer>
    </SplitView>
    

    Method Slide_Click is defined as

    private void Slide_Click(object sender, RoutedEventArgs e)
    {
        SplitView.IsPaneOpen = !SplitView.IsPaneOpen;
    }
    

  2. Javier R 211 Reputation points
    2020-05-22T10:24:11.33+00:00

    <SplitView x:Name="SplitView"
    Width="300"
    Background="{StaticResource SystemChromeHighColor}"
    DisplayMode="Overlay"
    CompactPaneLength="48"
    HorizontalAlignment="Right"
    IsPaneOpen="True">

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="170"/>
                    <ColumnDefinition Width="90"/>
                </Grid.ColumnDefinitions>
    
                <TextBlock Text="Opciones" Grid.Row="1" Grid.Column="0" Margin="10,0,0,0" Foreground="Black" FontSize="{StaticResource MediumFontSize}"/>
                <TextBlock Text="Papel cuadriculado"  Grid.Row="3" Grid.Column="0"   Margin="10,0,0,0"   Foreground="Black"  FontSize="{StaticResource MediumFontSize}"/>
    
    
            </Grid>
    
    
            </SplitView>
    
    
     private void Slide_Click(object sender, RoutedEventArgs e)
            {
                SplitView.IsPaneOpen = !SplitView.IsPaneOpen;
            }
    

    i have

    0 comments No comments

  3. Javier R 211 Reputation points
    2020-05-23T16:21:07.527+00:00
    <Page.Resources>
            <DataTemplate x:Key="BigHeaderTemplate">
                <RelativePanel>
                    <TextBlock x:Uid="InkDrawHeader" Margin="{StaticResource SmallLeftMargin}" MaxLines="1" TextTrimming="CharacterEllipsis" RelativePanel.LeftOf="toolbar" RelativePanel.AlignLeftWithPanel="True" />
                    <InkToolbar
                        x:Name="toolbar"
                        Background="Transparent"
                        Loaded="OnInkToolbarLoaded"
                        RelativePanel.AlignHorizontalCenterWithPanel="True">
                        <InkToolbarCustomToolButton
                            x:Uid="InkDraw_LassoSelectionButton"
                            Background="Transparent"
                            IsChecked="{Binding Content.LassoSelectionButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xEF20;" />
                        </InkToolbarCustomToolButton>
                        <InkToolbarCustomToggleButton
                            x:Uid="InkDraw_TouchInkingButton"
                            Background="Transparent"
                            IsChecked="{Binding Content.TouchInkingButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xED5F;" />
                        </InkToolbarCustomToggleButton>
                        <InkToolbarCustomToggleButton
                            x:Uid="InkDraw_MouseInkingButton"
                            Background="Transparent"
                            IsChecked="{Binding Content.MouseInkingButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE962;" />
                        </InkToolbarCustomToggleButton>
                    </InkToolbar>
    
    
    
    
                    <CommandBar x:Name="topCommandBar" Style="{StaticResource InkCommandBarStyle}" RelativePanel.RightOf="toolbar" RelativePanel.AlignRightWithPanel="True">
                        <CommandBar.PrimaryCommands>
    
                            <AppBarButton
                                Click="Slide_Click"
                                Icon="Accept"/>
    
                            <AppBarButton
                                x:Uid="InkDraw_ZoomInButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="ZoomIn_Click" 
                                Icon="ZoomIn" />
                            <AppBarButton
                                x:Uid="InkDraw_ZoomOutButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="ZoomOut_Click"
                                Icon="ZoomOut" />
                        </CommandBar.PrimaryCommands>
                        <CommandBar.SecondaryCommands>
                            <AppBarButton
                                x:Uid="InkDraw_CutButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Cut_Click"
                                Icon="Cut"
                                IsEnabled="{Binding Content.CutButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarButton
                                x:Uid="InkDraw_CopyButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Copy_Click"
                                Icon="Copy"
                                IsEnabled="{Binding Content.CopyButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarButton
                                x:Uid="InkDraw_PasteButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Paste_Click"
                                Icon="Paste"
                                IsEnabled="{Binding Content.PasteButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarSeparator />
                            <AppBarButton
                                x:Uid="InkDraw_UndoButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Undo_Click"
                                Icon="Undo"
                                IsEnabled="{Binding Content.UndoButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarButton
                                x:Uid="InkDraw_RedoButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Redo_Click"
                                Icon="Redo"
                                IsEnabled="{Binding Content.RedoButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarSeparator />
                            <AppBarButton
                                x:Uid="InkDraw_LoadInkFileButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="LoadInkFile_Click"
                                Icon="OpenFile" />
                            <AppBarButton
                                x:Uid="InkDraw_SaveInkFileButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="SaveInkFile_Click"
                                Icon="Save"
                                IsEnabled="{Binding Content.SaveInkFileButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarButton
                                x:Uid="InkDraw_ExportAsImageButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="ExportAsImage_Click"
                                Icon="Download"
                                IsEnabled="{Binding Content.ExportAsImageButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarSeparator />
                            <AppBarButton
                                x:Uid="InkDraw_ClearAllButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="ClearAll_Click"
                                Icon="Delete"
                                IsEnabled="{Binding Content.ClearAllButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                        </CommandBar.SecondaryCommands>
                    </CommandBar>
                </RelativePanel>
            </DataTemplate>
            <DataTemplate x:Key="SmallHeaderTemplate">
                <InkToolbar HorizontalAlignment="Center" Loaded="OnInkToolbarLoaded">
                    <InkToolbarCustomToolButton
                        x:Uid="InkDraw_LassoSelectionButton"
                        Background="Transparent"
                        IsChecked="{Binding Content.LassoSelectionButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xEF20;" />
                    </InkToolbarCustomToolButton>
                    <InkToolbarCustomToggleButton
                        x:Uid="InkDraw_TouchInkingButton"
                        Background="Transparent"
                        IsChecked="{Binding Content.TouchInkingButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xED5F;" />
                    </InkToolbarCustomToggleButton>
                    <InkToolbarCustomToggleButton
                        x:Uid="InkDraw_MouseInkingButton"
                        Background="Transparent"
                        IsChecked="{Binding Content.MouseInkingButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE962;" />
                    </InkToolbarCustomToggleButton>
                </InkToolbar>
            </DataTemplate>
        </Page.Resources>
    
    
    
    
    
        <Grid x:Name="ContentArea">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="visualStateGroup" CurrentStateChanged="VisualStateGroup_CurrentStateChanged">
                    <VisualState x:Name="SmallVisualState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                    </VisualState>
                    <VisualState x:Name="BigVisualState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="720" />
                        </VisualState.StateTriggers>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
    
            <ScrollViewer
                x:Name="canvasScroll"
                Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                ZoomMode="Enabled">
    
    
    
    
    
                <Grid
                        Background="{StaticResource InkCanvasBackground}"
                        Width="{Binding ElementName=inkCanvas, Path=Width}"
                        Height="{Binding ElementName=inkCanvas, Path=Height}">
    
    
    
    
    
                    <InkCanvas
                            x:Name="inkCanvas"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch" />
    
                    <Canvas
                        x:Name="selectionCanvas"
                        Width="{Binding ElementName=inkCanvas, Path=Width}"
                        Height="{Binding ElementName=inkCanvas, Path=Height}" />
    
    
    
    
    
                </Grid>
    
    
    
            </ScrollViewer>
    
    
    
    
            <CommandBar
                x:Name="bottomCommandBar"
                Grid.Row="1"
                Style="{StaticResource InkCommandBarStyle}">
                <CommandBar.PrimaryCommands>
                    <AppBarButton
                        x:Uid="InkDraw_ZoomInButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="ZoomIn_Click"
                        Icon="ZoomIn" />
                    <AppBarButton
                        x:Uid="InkDraw_ZoomOutButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="ZoomOut_Click"
                        Icon="ZoomOut" />
                </CommandBar.PrimaryCommands>
                <CommandBar.SecondaryCommands>
                    <AppBarButton
                        x:Uid="InkDraw_CutButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="Cut_Click"
                        Icon="Cut"
                        IsEnabled="{x:Bind CutButtonIsEnabled, Mode=OneWay}" />
                    <AppBarButton
                        x:Uid="InkDraw_CopyButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="Copy_Click"
                        Icon="Copy"
                        IsEnabled="{x:Bind CopyButtonIsEnabled, Mode=OneWay}" />
                    <AppBarButton
                        x:Uid="InkDraw_PasteButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="Paste_Click"
                        Icon="Paste"
                        IsEnabled="{x:Bind PasteButtonIsEnabled, Mode=OneWay}" />
                    <AppBarSeparator />
                    <AppBarButton
                        x:Uid="InkDraw_UndoButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="Undo_Click"
                        Icon="Undo"
                        IsEnabled="{x:Bind UndoButtonIsEnabled, Mode=OneWay}" />
                    <AppBarButton
                        x:Uid="InkDraw_RedoButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0" 
                        Click="Redo_Click"
                        Icon="Redo"
                        IsEnabled="{x:Bind RedoButtonIsEnabled, Mode=OneWay}" />
                    <AppBarSeparator />
                    <AppBarButton
                        x:Uid="InkDraw_LoadInkFileButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="LoadInkFile_Click"
                        Icon="OpenFile" />
                    <AppBarButton
                        x:Uid="InkDraw_SaveInkFileButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="SaveInkFile_Click"
                        Icon="Save"
                        IsEnabled="{x:Bind SaveInkFileButtonIsEnabled, Mode=OneWay}" />
                    <AppBarButton
                        x:Uid="InkDraw_ExportAsImageButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="ExportAsImage_Click"
                        Icon="Download"
                        IsEnabled="{x:Bind ExportAsImageButtonIsEnabled, Mode=OneWay}" />
                    <AppBarSeparator />
                    <AppBarButton
                        x:Uid="InkDraw_ClearAllButton"
                        BorderBrush="Transparent"
                        BorderThickness="0,0,0,0"
                        Click="ClearAll_Click"
                        Icon="Delete"
                        IsEnabled="{x:Bind ClearAllButtonIsEnabled, Mode=OneWay}" />
                </CommandBar.SecondaryCommands>
            </CommandBar>
            <SplitView x:Name="SplitView"
                       Width="300"
                       Background="{StaticResource SystemChromeHighColor}"
                       DisplayMode="Overlay"
                       CompactPaneLength="48"
                       HorizontalAlignment="right"
                       IsPaneOpen="True" >
    
    
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="30"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="170"/>
                        <ColumnDefinition Width="90"/>
                    </Grid.ColumnDefinitions>
    
                    <TextBlock Text="Opciones" Grid.Row="1" Grid.Column="0" Margin="10,0,0,0" Foreground="Black" FontSize="{StaticResource MediumFontSize}"/>
                    <TextBlock Text="Papel cuadriculado"  Grid.Row="3" Grid.Column="0"   Margin="10,0,0,0"   Foreground="Black"  FontSize="{StaticResource MediumFontSize}"/>
    
    
                </Grid>
    
    
            </SplitView>
    
    
    
    
        </Grid>
    
    
    
    
    </Page>
    
    0 comments No comments

  4. Fay Wang - MSFT 5,191 Reputation points
    2020-05-27T05:21:52.83+00:00

    Hello,

    Welcome to Microsoft Q&A!

    the problem is when I pulse the bootn that opens the splitview well but if I press the zoom bootn it also opens the splitview.

    The SpliteView you displayed just the content part, at first you set the IsPaneOpen property as true, so it will display the empty panel part, when you click the zoom button or other buttons, the panel part will close and show the content part. So it is an expected behavior, the IsPaneOpen property just control the panel part.

    If you still want to use this layout, you can set the IsPaneOpen property as false to only show the content part and then when you click the zoom button, you can set the Visibility of SplitView as Collapsed to hide it. If you want to show the SplitView, set the Visibility as Visible. For example:

    private void ZoomIn_Click(object sender, RoutedEventArgs e)
    {
        SplitView.Visibility = Visibility.Collapsed;
    }
    

    Or you can set the ScrollViewer as the content of SplitView and set the Grid in the SplitView as the panel. In addition, setting SplitView.PanePlacement as Right to show the pane at the right side. In this case, when you click the button, the panel will automatically close. For example:

    .xaml:

    <Grid x:Name="ContentArea">
        <VisualStateManager.VisualStateGroups>
            ......
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <CommandBar
             x:Name="bottomCommandBar"
             Grid.Row="1"
             Style="{StaticResource InkCommandBarStyle}">
            ......
        </CommandBar>
        <SplitView x:Name="SplitView"
                    Background="{StaticResource SystemChromeHighColor}"
                    DisplayMode="Overlay"
                    CompactPaneLength="48"
                    PanePlacement="right"
                    IsPaneOpen="True" >
            <SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="30"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="170"/>
                        <ColumnDefinition Width="90"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="Opciones" Grid.Row="1" Grid.Column="0" Margin="10,0,0,0" Foreground="Black" FontSize="{StaticResource MediumFontSize}"/>
                    <TextBlock Text="Papel cuadriculado"  Grid.Row="3" Grid.Column="0"   Margin="10,0,0,0"   Foreground="Black"  FontSize="{StaticResource MediumFontSize}"/>
                </Grid>
            </SplitView.Pane>
            <ScrollViewer x:Name="canvasScroll" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
             ScrollViewer.VerticalScrollBarVisibility="Auto"
             ScrollViewer.HorizontalScrollBarVisibility="Auto"
             ZoomMode="Enabled">
                <Grid Background="{StaticResource InkCanvasBackground}"
                  Width="{Binding ElementName=inkCanvas, Path=Width}"
                  Height="{Binding ElementName=inkCanvas, Path=Height}">
                    <InkCanvas x:Name="inkCanvas"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch" />
                    <Canvas x:Name="selectionCanvas"
                        Width="{Binding ElementName=inkCanvas, Path=Width}"
                        Height="{Binding ElementName=inkCanvas, Path=Height}" />
                </Grid>
            </ScrollViewer>
        </SplitView>
    </Grid>
    

  5. Javier R 211 Reputation points
    2020-05-27T16:18:27.14+00:00
    <CommandBar x:Name="topCommandBar" Style="{StaticResource InkCommandBarStyle}" RelativePanel.RightOf="toolbar" RelativePanel.AlignRightWithPanel="True">
                        <CommandBar.PrimaryCommands>
                            <!-- btOption is  open and close Splitvieww-->
                            <AppBarButton
                                x:Name="BTOption" 
                                Click="Slide_Click"
                                Icon="Accept"/>
    
                            <AppBarButton
                                x:Uid="InkDraw_ZoomInButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="ZoomIn_Click" 
                                Icon="ZoomIn" />
                            <AppBarButton
                                x:Uid="InkDraw_ZoomOutButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="ZoomOut_Click"
                                Icon="ZoomOut" />
                        </CommandBar.PrimaryCommands>
                        <CommandBar.SecondaryCommands>
                            <AppBarButton
                                x:Uid="InkDraw_CutButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Cut_Click"
                                Icon="Cut"
                                IsEnabled="{Binding Content.CutButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarButton
                                x:Uid="InkDraw_CopyButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Copy_Click"
                                Icon="Copy"
                                IsEnabled="{Binding Content.CopyButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarButton
                                x:Uid="InkDraw_PasteButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Paste_Click"
                                Icon="Paste"
                                IsEnabled="{Binding Content.PasteButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarSeparator />
                            <AppBarButton
                                x:Uid="InkDraw_UndoButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Undo_Click"
                                Icon="Undo"
                                IsEnabled="{Binding Content.UndoButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarButton
                                x:Uid="InkDraw_RedoButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="Redo_Click"
                                Icon="Redo"
                                IsEnabled="{Binding Content.RedoButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarSeparator />
                            <AppBarButton
                                x:Uid="InkDraw_LoadInkFileButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="LoadInkFile_Click"
                                Icon="OpenFile" />
                            <AppBarButton
                                x:Uid="InkDraw_SaveInkFileButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="SaveInkFile_Click"
                                Icon="Save"
                                IsEnabled="{Binding Content.SaveInkFileButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarButton
                                x:Uid="InkDraw_ExportAsImageButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="ExportAsImage_Click"
                                Icon="Download"
                                IsEnabled="{Binding Content.ExportAsImageButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                            <AppBarSeparator />
                            <AppBarButton
                                x:Uid="InkDraw_ClearAllButton"
                                BorderBrush="Transparent"
                                BorderThickness="0,0,0,0"
                                Click="ClearAll_Click"
                                Icon="Delete"
                                IsEnabled="{Binding Content.ClearAllButtonIsEnabled, ElementName=shellFrame, Mode=OneWay}" />
                        </CommandBar.SecondaryCommands>
                    </CommandBar>
                </RelativePanel>
            </DataTemplate>
            <DataTemplate x:Key="SmallHeaderTemplate">
                <InkToolbar HorizontalAlignment="Center" Loaded="OnInkToolbarLoaded">
                    <InkToolbarCustomToolButton
                        x:Uid="InkDraw_LassoSelectionButton"
                        Background="Transparent"
                        IsChecked="{Binding Content.LassoSelectionButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xEF20;" />
                    </InkToolbarCustomToolButton>
                    <InkToolbarCustomToggleButton
                        x:Uid="InkDraw_TouchInkingButton"
                        Background="Transparent"
                        IsChecked="{Binding Content.TouchInkingButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xED5F;" />
                    </InkToolbarCustomToggleButton>
                    <InkToolbarCustomToggleButton
                        x:Uid="InkDraw_MouseInkingButton"
                        Background="Transparent"
                        IsChecked="{Binding Content.MouseInkingButtonIsChecked, ElementName=shellFrame, Mode=TwoWay}">
                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE962;" />
                    </InkToolbarCustomToggleButton>
                </InkToolbar>
            </DataTemplate>
        </Page.Resources>
    
    
    
    
    
        <Grid x:Name="ContentArea">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="visualStateGroup" CurrentStateChanged="VisualStateGroup_CurrentStateChanged">
                    <VisualState x:Name="SmallVisualState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                    </VisualState>
                    <VisualState x:Name="BigVisualState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="720" />
                        </VisualState.StateTriggers>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
    
    
            <SplitView x:Name="SplitView"
                       Width="300"
                       Background="CadetBlue"
                       DisplayMode="Overlay"
                       CompactPaneLength="48"
                       PanePlacement="Right"
                       HorizontalAlignment="Right"
                       IsPaneOpen="False" >
    
    
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="30"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="170"/>
                        <ColumnDefinition Width="90"/>
                    </Grid.ColumnDefinitions>
    
                    <TextBlock Text="Opciones" Grid.Row="1" Grid.Column="0" Margin="10,0,0,0" Foreground="Black" FontSize="{StaticResource MediumFontSize}"/>
                    <TextBlock Text="Papel cuadriculado"  Grid.Row="3" Grid.Column="0"   Margin="10,0,0,0"   Foreground="Black"  FontSize="{StaticResource MediumFontSize}"/>
    
    
                </Grid>
    
    
            </SplitView>
    
    
    
    
    
            <ScrollViewer
                x:Name="canvasScroll"
                Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                ZoomMode="Enabled">
    
    
    
    
    
    
                <Grid
                        Background="{StaticResource InkCanvasBackground}"
                        Width="{Binding ElementName=inkCanvas, Path=Width}"
                        Height="{Binding ElementName=inkCanvas, Path=Height}">
    
    
    
    
    
                    <InkCanvas
                            x:Name="inkCanvas"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch" />
    
                    <Canvas
                        x:Name="selectionCanvas"
                        Width="{Binding ElementName=inkCanvas, Path=Width}"
                        Height="{Binding ElementName=inkCanvas, Path=Height}" />
    
    
    
    
                </Grid>
    
    
    
            </ScrollViewer>