how can I do a SideIn Panel

Javier R 211

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.

Daniele 1,996 Reputation points

2020-05-12T13:57:06.847+00:00

I searched on the web too... what is a SideIn Panel? If is just a panel that slides in from left or from you can use a SplitView, but from your requirement are not so clear to me.
Javier R 211 Reputation points

2020-05-12T13:59:46.303+00:00

is a panel from the right side in to have several options such as toogleswitch etc for uwp c #
Fay Wang - MSFT 5,221 Reputation points

2020-05-13T01:58:43.377+00:00

The following method uses the SplitView and puts the panel to the right side, can it meet your needs? In addition, what does "in spliteview you can use storyBoard" mean? Can you show more details about your expected behavior?
Javier R 211 Reputation points

2020-05-13T08:41:06.547+00:00

if in spliteview you can use storyboard
Fay Wang - MSFT 5,221 Reputation points

2020-05-13T09:35:08.12+00:00

Why do you want to use storyboard? What do you want to achieve? can you show more details about your expected behavior?
Javier R 211 Reputation points

2020-05-20T08:36:14.617+00:00

hello:

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 but then I can zoom.

How can I make the other buttons not open the spltview?
Matt Lacey 791 Reputation points MVP

2020-05-20T11:17:17.027+00:00

It's hard to tell exactly what the problem is based on your description. Can you share code that reproduces the issue?

If I had to guess, I'd assume you're putting a button in the pane to enable zooming or inking but when clicking on it it's opening/expanding the pane and interfering with whatever else you want to do.
If that's the case, you might want to try setting the displaymode of the splitview to be CompactInline.
If you still want the pane to open in some scenarios, you could keep it open (with a different mode) but adjust the width by setting OpenPaneLength
Javier R 211 Reputation points

2020-05-20T18:08:50.48+00:00

The problem is that splitview has its own button to open and close the splitview. Now the problem is when I press the Zoom or another button opens me splitview, as I can make the other buttons there will not be the spltiview
Daniele 1,996 Reputation points

2020-05-20T19:30:25.343+00:00

SplitView has no its own buttons to be opened and closed. You have to create buttons to do that, if you did not created buttons I can imagine you used a code template or similar, or you toke the code from some example. I think that to solve your specific problem you have to share your code so that we can help you to find the solution.

7 answers

Daniele 1,996

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;
}

Javier R 211 Reputation points

2020-05-12T14:59:55.607+00:00

in spliteview you can use storyBoard
Javier R 211 Reputation points

2020-05-18T16:57:14.9+00:00

the problem is that splitview disables me the zoom button for inkcanvas.
Fay Wang - MSFT 5,221 Reputation points

2020-05-19T05:47:14.23+00:00

Do you mean you can't zoom the inkcanvas when you use splitView? Can you provide a simple sample that can be reproduced for us to test?

Javier R 211

<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

Javier R 211

<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>

Fay Wang - MSFT 5,221

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>

Javier R 211 Reputation points

2020-05-27T15:40:59.677+00:00

the zoomIn button doesn't have to open the Spltiview for that it has its own BtOption button is that it opens the panel and closes that panel.

And if I put the spltiview between scrollviwer and the grid x:Name=ContentArea when I press the button for the Spltiview does not exit the panel.
Fay Wang - MSFT 5,221 Reputation points

2020-05-28T06:56:24.5+00:00

As the above code shown, when you click the zoomIn button or other buttons, the panel of SplitView will automatically closes. In addition, why did you put the splitView between scrollviwer and the grid? What layout do you want? Can you show more details about your layout? The following code snippet is not complete, please provide a simple and complete sample for us to test.

Javier R 211

<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>

Daniele 1,996 Reputation points

2020-05-27T20:14:47.65+00:00

Suggestion: instead to post tons of lines of code could you attach the .xml and .xaml.cs files. You should be able to do this adding .txt suffix at the end of the file name.
Javier R 211 Reputation points

2020-05-28T08:23:00.333+00:00

hello.: 8710-app1-xamlcs.txt

problem is in the btoption which is the one that opens and closes the panel , the other buttons should not open the panel.

SplitView.Visibility = Visibility.Collapsed;
Daniele 1,996 Reputation points

2020-05-28T20:36:38.5+00:00

I updated my answer above, check it and let me know.
Javier R 211 Reputation points

2020-05-29T10:00:35.74+00:00

has you mean, the problem is that Splitview doesn't come out when I press button "BTOption" to open and close the panel
Daniele 1,996 Reputation points

2020-05-29T14:40:06.55+00:00

Do you mean that after applying changes as I proposed in my answer above the Splitview doesn't open? Did you changed the method Slide_Click too as I wrote in the answer?
Javier R 211 Reputation points

2020-05-29T15:19:48.17+00:00

yes, exactly the splitview does not open and close with the button now called BtOption_Click. the splitview is supposed to be above the scrollviwer
Daniele 1,996 Reputation points

2020-05-29T16:07:20.013+00:00

Post here again your current xaml and xaml.cs. I wrote a working example before to update my answer, so I think the only option is to check again your current code and xaml.
Javier R 211 Reputation points

2020-05-29T19:51:00.2+00:00

Hello:
I changed the SplitView site below the scrollviwer closure. Here it works but closes with SplitView.Visibility - Visibility.Collapsed;
Daniele 1,996 Reputation points

2020-05-30T08:56:57.913+00:00
You are not using SplitView in the way it is designed to work. At this url https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/split-view the functional documentation and at https://learn.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.SplitView the class reference.

The Pane of the SplitView opens (depending on property SplitView.DisplayMode) over the content of the SplitView, so I think you should put the ScrollViewer as content of the SplitView and you have to use

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

as in my answer above.
Javier R 211 Reputation points

2020-05-30T15:55:44.4+00:00

the problem is that the scrollviwer has the inkcanvas, this panel has to go outside the scrollviwer is using WTS.
Javier R 211 Reputation points

2020-05-30T17:02:37.97+00:00

Hello:

the problem if I put SplitView.IsPaneOpen ! SplitView.IsPaneOpen; the buttons zoomIn_Click and others open the panel
Fay Wang - MSFT 5,221 Reputation points

2020-06-01T06:31:52.077+00:00

What is your current complete layout? Still put the scrollviewer as the content of the splitview and put the Grid as the panel of splitview? If it is, the you click the zoomIn_Click or other button, the panel will automatically close, they won't open the panel. You just need to control the panel's open or close in BtOption_Click event. If it isn't, can you show your currently xaml layout?
Javier R 211 Reputation points

2020-06-01T08:07:04.377+00:00

Hello: the Btoption button closes and opens the Panel correctly, the other ZoomIn buttons close the panel but open it this works

I've put overlay is supposed to be hidden the panel
Fay Wang - MSFT 5,221 Reputation points

2020-06-02T07:21:58.657+00:00

Does "I've put overlay is supposed to be hidden the panel" this mean you set the DisplayMode as Overlay? If not, can you show more details about it? In addition, do you still have the issue?
Daniele 1,996 Reputation points

2020-06-02T07:25:38.297+00:00

If you want more help post here your xaml and xaml.cs files. I still think you are not using correctly SplitView.Pane property.

Your answer