question

Jramos avatar image
0 Votes"
Jramos asked ·

how can I do a SideIn Panel

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.

windows-uwp-xaml
· 9
10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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.

1 Vote 1 ·

is a panel from the right side in to have several options such as toogleswitch etc for uwp c #


0 Votes 0 ·

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?

0 Votes 0 ·

if in spliteview you can use storyboard


0 Votes 0 ·

Why do you want to use storyboard? What do you want to achieve? can you show more details about your expected behavior?

1 Vote 1 ·

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?


0 Votes 0 ·

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



0 Votes 0 ·

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

0 Votes 0 ·
Show more comments
danielescipioni avatar image
0 Votes"
danielescipioni answered ·

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;
}
· 3
10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

in spliteview you can use storyBoard


0 Votes 0 ·

the problem is that splitview disables me the zoom button for inkcanvas.


0 Votes 0 ·

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?

0 Votes 0 ·
Jramos avatar image
0 Votes"
Jramos answered ·

<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

10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Jramos avatar image
0 Votes"
Jramos answered ·
 <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>
10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

FayWang-MSFT avatar image
0 Votes"
FayWang-MSFT answered ·

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>



· 2
10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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.


0 Votes 0 ·

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.

0 Votes 0 ·
Jramos avatar image
0 Votes"
Jramos answered ·
 <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>
· 15
10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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.

0 Votes 0 ·

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;


0 Votes 0 ·
app1-xamlcs.txt (10.5 KiB)

I updated my answer above, check it and let me know.

0 Votes 0 ·

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

0 Votes 0 ·
Show more comments

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


0 Votes 0 ·

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.

0 Votes 0 ·

Hello:
I changed the SplitView site below the scrollviwer closure. Here it works but closes with SplitView.Visibility - Visibility.Collapsed;

0 Votes 0 ·
Show more comments

the problem is that the scrollviwer has the inkcanvas, this panel has to go outside the scrollviwer is using WTS.


0 Votes 0 ·

Hello:


the problem if I put SplitView.IsPaneOpen ! SplitView.IsPaneOpen; the buttons zoomIn_Click and others open the panel


0 Votes 0 ·

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?

0 Votes 0 ·
Show more comments
Jramos avatar image
0 Votes"
Jramos answered ·

the problem is in the displayMode that is in Overlay . Now any button closes the SplitView. But it only opens BtOption and also closes it.

if you don't look at the Windows 10 Mail App any button closes the settings.

· 1
10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

From your last sentence seems that now SplitView behave as expected: BtOption opens the Pane, and the Pane is closed when it lose focus. Note that: the Pane is not closed by a button, is closed because focus is lost.

What is your expected behavior?

0 Votes 0 ·
Jramos avatar image
0 Votes"
Jramos answered ·

Hello:
when I open the App the panel appears extended, when btOption pulse or another button closes.

· 1
10 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Check the initial value of SplitView.IsPaneOpen

0 Votes 0 ·