Scrollen in elementen die von anderen Überdeckt werden

Question

Hallo,

ich habe inzwischen die Grund Gui für meine App fertig und sie funktioniert auch wie gewollt. Mit dem Problem das wenn ich die Fensterhöhe verringere Überdecken sich verschiedene Elemente, dass passt auch soweit aber ich möchte gerne in dem verdeckten Bereich scrollen können. Wie geht das?

Hier der entsprechende code

  <SplitView x:Name="SplitView" Grid.Row="1" OpenPaneLength="160" CompactPaneLength="48"  
        DisplayMode="CompactOverlay"  IsPaneOpen="False"  Content="{Binding}" PaneBackground="{ThemeResource SystemAccentColor}">
            <SplitView.Pane>
                <Grid>
                <StackPanel x:Name="SplitViewPanePanel">
                    <RadioButton x:Name="AktuellButton"  Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE102;" Content="Aktuell" GroupName="Auswahl" />
                    <RadioButton x:Name="OrdnerRadioButton" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE975;" Content="Ordner" GroupName="Auswahl"/>
                    <RadioButton x:Name="LiederRadioButton"  Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE8D6;" Content="Lieder" GroupName="Auswahl"/>
                    <RadioButton x:Name="InterpretenRadioButton" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE716;" Content="Interpreten" GroupName="Auswahl"/>
                    <RadioButton x:Name="AlbumRadioButton"  Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE142;" Content="Album" GroupName="Auswahl"/>
                    <RadioButton x:Name="GenreRadioButton" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE95B;" Content="Genre" GroupName="Auswahl"/>
                </StackPanel>
                    <RadioButton x:Name="Einstellungen" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE115;" Content="Einstellungen" GroupName="Auswahl" VerticalAlignment="Bottom" />
                </Grid>
            </SplitView.Pane>
        </SplitView >

Answer 1

Hallo Nico,

da wirst du vermutlich einen ScrollViewer einbauen müssen. Also einfach um das StackPanel drum herum.
Dieser hat verschiedene Eigenschaften (HorizontalScrollBarVisibility usw.) um zu bestimmen was wie gescrollt werden kann. So kannst du das ggf. noch etwas beeinflussen.

Bedenke aber auch, dass man die App trotzdem mit einer Maus ohne Scrollrad bedienen können muss. In dem Fall muss also eine Scrollbar angezeigt werden.

Ansonsten könntest du das Bedienkonzept auch derart anpassen, dass dann ein Button mit ... auftaucht der dann alle Befehle anzeigt o.ä. Aber das ist nur eine Idee, der ScrollViewer sollte auch seinen Dienst tun.

---

Tom Lambert - .NET (C#) MVP
Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

Answer 2

Hallo Tom,

danke für die vielen schnellen antworten. Habe es mit dem Scroll Viewer hinbekommen. Musste zusätzlich noch in der Grid zwei Zeilen erstellen damit ich auch auf den letzten Button scrollen kann. Hier der Code falls nochmal jemand so ein Problem hat.

 <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="GrRowAuswahl" Height="*"/>
                        <RowDefinition x:Name="GrRowEinstellungen" Height="48"/>
                    </Grid.RowDefinitions>
                    <ScrollViewer Grid.Row="0" >
                    <StackPanel x:Name="SplitViewPanePanel"  >
                        <RadioButton x:Name="AktuellButton"   Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE102;" Content="Aktuell" GroupName="Auswahl" />
                        <RadioButton x:Name="OrdnerRadioButton" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE975;" Content="Ordner" GroupName="Auswahl"/>
                        <RadioButton x:Name="LiederRadioButton"  Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE8D6;" Content="Lieder" GroupName="Auswahl"/>
                        <RadioButton x:Name="InterpretenRadioButton" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE716;" Content="Interpreten" GroupName="Auswahl"/>
                        <RadioButton x:Name="AlbumRadioButton"  Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE142;" Content="Album" GroupName="Auswahl"/>
                        <RadioButton x:Name="GenreRadioButton" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE95B;" Content="Genre" GroupName="Auswahl"/>
                    </StackPanel>
                    </ScrollViewer>
                    <RadioButton Grid.Row="1" x:Name="Einstellungen" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE115;" Content="Einstellungen" GroupName="Auswahl" VerticalAlignment="Bottom" />
                  </Grid>