xamluwpsplitview

uwp xaml splitView group items in a row?


its me again :(, I have another question. I tested the basic splitView from this Site: splitView.

In every row is one button and one textblock. But only the button is clickable/selectable. What must i change that the complete row is selected? I want a background color for the whole line. Like this: example what i want

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 
           CompactPaneLength="50" OpenPaneLength="150">
    <SplitView.Pane>
        <StackPanel Background="Gray">
            <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
StackPanel Orientation="Horizontal">
                <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"
                Width="50" Height="50" Background="Transparent"/>
                <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Button x:Name="MenuButton2"

FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"
                    Width="50" Height="50" Background="Transparent"/>
                <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"
                    Width="50" Height="50" Background="Transparent"/>
 <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
            </StackPanel>
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <Grid>
            <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </SplitView.Content>
</SplitView>
</Page>

Thanks for your help!


Solution

  • You need to add a listbox for your menu. Each row is then a listbox-item. Inside the listbox-item you put your horizontal stackpanel.

    Next I would recommend you the replace the buttons with images, because you'll notice that you now are able to select the hole row, but also the button. So that will be very confusing for the user.

    Hope this helps.