如何将ListboxItem放在splitview uwp中列表框的底部

Question

So I have a listbox with several listboxItems but the last Item Name"ExampleBottom" needs to be at the bottom while the others need to stay on the top. I tried verticalalign but this doesn't work.

        <SplitView.Pane>

            <ListBox SelectionMode="Single" 
                     SelectionChanged="ListBox_SelectionChanged"
                     Background="#333333"
                     Foreground="White">

                <ListBoxItem Name="Example1">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock>Example</TextBlock>
                    </StackPanel>
                </ListBoxItem>

                <ListBoxItem Name="Example2">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock>Example</TextBlock>
                    </StackPanel>
                </ListBoxItem>

                <ListBoxItem Name="Example3">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock>Example</TextBlock>
                    </StackPanel>
                </ListBoxItem>

                <ListBoxItem Name="ExampleBottom" VerticalAlignment="Bottom">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock>Example</TextBlock>
                    </StackPanel>
                </ListBoxItem>
            </ListBox>

        </SplitView.Pane>

Answer 1

I don't think you get this done with a listbox. I would use a grid and then have a empty row in the middle but you need to implement your own Selection mechanism then

Answer 2

I've accomplished this using 2 list boxes inside a RelativePanel .

Have the first ListBox have a RelativePanel.AlignTopWithPanel = "True" Have the second ListBox have a RelativePanel.AlignBottomWithPanel = "True"

Next, if you want it to look seamless, be sure the background color of your relative panel is the same as your ListBox(s).

        <SplitView.Pane>
            <RelativePanel Background="Black">
                <ListBox SelectionMode="Single"
                 Name="IconsListBox"
                 SelectionChanged="ListBoxSelectionChanged"
                 Background="Black"
                         RelativePanel.AlignTopWithPanel="True">
                    <ListBoxItem Name="HomeListBoxItem"
                             ToolTipService.ToolTip="Home"
                             PointerEntered="HamburgerMenuItemPointerEntered" 
                             PointerExited="HamburgerMenuItemPointerExited">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock 
                            Foreground="White"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="16"
                            Text="&#xE10F;" />
                            <TextBlock 
                            Foreground="White" 
                            Text="Home" 
                            FontSize="16" 
                            FontFamily="Arial"
                            Margin="20,0,0,0" />
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="SecondListBoxItem"
                             ToolTipService.ToolTip="2nd Item"
                             PointerEntered="HamburgerMenuItemPointerEntered" 
                             PointerExited="HamburgerMenuItemPointerExited">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Foreground="White"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="16"
                            Text="&#xE734;" />
                            <TextBlock 
                            Foreground="White" 
                            Text="Dosimetry" 
                            FontFamily="Arial"
                            FontSize="16" 
                            Margin="20,0,0,0" />
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
                <ListBox SelectionMode="Single"
                 Name="BottomListBox"
                 SelectionChanged="ListBoxSelectionChanged"
                 Background="Black"
                         RelativePanel.AlignBottomWithPanel="True">
                    <ListBoxItem Name="UserListBoxItem"
                             ToolTipService.ToolTip="Dosimetry"
                             PointerEntered="HamburgerMenuItemPointerEntered" 
                             PointerExited="HamburgerMenuItemPointerExited"
                             VerticalAlignment="Bottom">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Foreground="White"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="16"
                            Text="&#xE2AF;" />
                            <TextBlock 
                            Foreground="White" 
                            Text="User" 
                            FontFamily="Arial"
                            FontSize="16" 
                            Margin="20,0,0,0" />
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="SettingsListBoxItem"
                             ToolTipService.ToolTip="Dosimetry"
                             PointerEntered="HamburgerMenuItemPointerEntered" 
                             PointerExited="HamburgerMenuItemPointerExited">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Foreground="White"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="16"
                            Text="&#xE713;" />
                            <TextBlock 
                            Foreground="White" 
                            Text="Settings" 
                            FontFamily="Arial"
                            FontSize="16" 
                            Margin="20,0,0,0" />
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </RelativePanel>
        </SplitView.Pane>