Question

我要像Win10应用程序一样创建HamburgerMenu。 HamburgerMenu基础是SplitView组件，为了在SplitView中分配子项，我选择使用RelativePanel，因此我可以选择哪些菜单项位于顶部，哪些菜单项位于底部，如Weather App。

但是，在我的应用中，底部项目的宽度与顶部项目的宽度不同。

我尝试过几件事HorizontalAlignment="Stretch"，在LitView和ListView之间绑定，但没有任何变化。底部ListView忽略任何非手动（非固定）宽度设置。下面是我的XAML代码。

<Grid x:Name="GridToMainPage">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <RelativePanel x:Name="RelatMainPanelTop" Background="#FFFF6800">

            <Button x:Name="HamburgerMenuButton" Content="&#xE700;" FontFamily="Segoe MDL2 Assets" FontSize="22" VerticalAlignment="Stretch" Background="#FFFF6800" Height="39.5" Width="{Binding CompactPaneLength, ElementName=MainSplitView}" Click="OnHaburgerButtonClick"/>
            <TextBlock x:Name="NavigationTitle" Text="Início" RelativePanel.RightOf="HamburgerMenuButton" Margin="10,0,0,0" FontSize="30" FontWeight="Bold"/>
            <TextBox x:Name="MainSearchTextBox" Width="200" PlaceholderText="Buscar" RelativePanel.AlignVerticalCenterWithPanel="True" RelativePanel.LeftOf="MainSearchButtom"/>
            <Button x:Name="MainSearchButtom" Content="&#xE1A3;" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" FontFamily="Segoe MDL2 Assets" FontSize="20" Margin="0,0,10,0"/>

        </RelativePanel>

        <SplitView x:Name="MainSplitView" Grid.Row="1" DisplayMode="CompactOverlay" CompactPaneLength="43" OpenPaneLength="{Binding Width, ElementName=HamburgerMenuListView1}">
            <SplitView.Pane>
                <RelativePanel x:Name="MainSplitRelativPanel">

                    <ListView x:Name="HamburgerMenuListView1">
                        <ListViewItem x:Name="HomeSplittem">
                            <StackPanel x:Name="HomeStackPanelViewItem" Orientation="Horizontal">
                                <TextBlock x:Name="HomeIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE80F;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                <TextBlock x:Name="HomeTextSplitItem" FontSize="18" Text="Início" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                            </StackPanel>
                        </ListViewItem>

                        <ListViewItem x:Name="PersonsSplitItem">
                            <StackPanel x:Name="PersonsStackPanelViewItem" Orientation="Horizontal">
                                <TextBlock x:Name="PersonsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE716;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                <TextBlock x:Name="PersonsTextSplitItem" FontSize="18" Text="Pessoas" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                            </StackPanel>
                        </ListViewItem>

                        <ListViewItem x:Name="MediaSplitItem">
                            <StackPanel x:Name="MediaStackPanelViewItem" Orientation="Horizontal">
                                <TextBlock x:Name="MediaIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE8F1;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                <TextBlock x:Name="MediaTextSplitItem" FontSize="18" Text="Mídias" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                            </StackPanel>
                        </ListViewItem>

                        <ListViewItem x:Name="MovementsSplitItem">
                            <StackPanel x:Name="MovementsStackPanelViewItem" Orientation="Horizontal">
                                <TextBlock x:Name="MovementsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE7BF;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                <TextBlock x:Name="MovementsTextSplitItem" FontSize="18" Text="Movimentações" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                            </StackPanel>
                        </ListViewItem>

                        <ListViewItem x:Name="CashDeskSplitItem">
                            <StackPanel x:Name="CashDeskStackPanelViewItem" Orientation="Horizontal">
                                <TextBlock x:Name="CashDeskIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE75F;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                <TextBlock x:Name="CashDeskTextSplitItem" FontSize="18" Text="Caixa" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                            </StackPanel>
                        </ListViewItem>

                        <ListViewItem x:Name="ReportsSplitItem">
                            <StackPanel x:Name="ReportsStackPanelViewItem" Orientation="Horizontal">
                                <TextBlock x:Name="ReportsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xEB05;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                <TextBlock x:Name="ReportsTextSplitItem" FontSize="18" Text="Relatórios" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                            </StackPanel>
                        </ListViewItem>

                        <ListViewItem x:Name="ConfigSplitItem">
                            <StackPanel x:Name="ConfigStackPanelViewItem" Orientation="Horizontal">
                                <TextBlock x:Name="ConfigIconSplitItem" FontSize="18" Text="&#xE90F;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
                                <TextBlock x:Name="ConfiTextSplitItem" FontSize="18" Text="Configurações" Margin="12.5,0,0,0"/>
                            </StackPanel>
                        </ListViewItem>

                    </ListView>

                    <ListView x:Name="HambugerMenuListView2" RelativePanel.AlignBottomWithPanel="True"  HorizontalAlignment="Stretch" Margin="0,0,0,20" Width="181">
                        <ListViewItem x:Name="LoginSplitItem" HorizontalAlignment="Stretch">
                            <StackPanel x:Name="LoginStackPanelViewItem" Orientation="Horizontal" HorizontalAlignment="Stretch">
                                <TextBlock x:Name="LoginIconSplitItem" FontSize="18" Text="&#xE8D7;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
                                <TextBlock x:Name="LoginTextSplitItem" FontSize="18" Text="User Name" Margin="12.5,0,0,0"/>
                            </StackPanel>
                        </ListViewItem>
                    </ListView>

                </RelativePanel>
            </SplitView.Pane>
        </SplitView>
    </Grid>

Answer 1

实际上，有一种更简单的方法可以达到你想要的效果。

你有点用这行代码做到了 -

OpenPaneLength="{Binding Width, ElementName=HamburgerMenuListView1}"

由于您尚未实际指定Wdith HamburgerMenuListView1，Width始终为double.NaN。这基本上等同于这个 -

OpenPaneLength="Auto"

OpenPaneLength的默认值为320，因为您已将其设置为Auto，所以侧面板的宽度基本上会根据其子项的最大宽度进行拉伸。

你的第一个ListView显然更宽，所以父母侧面板会伸展到它的宽度;您的第二个ListView较短，并且由于其默认水平对齐（RelativePanel内）为Left，您将看到它左对齐，如屏幕截图所示。< / p>

所以，真正的问题是，如何拉伸第二个ListView以适应整个侧面板？

您只需将这两行添加到第二个ListView -

RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"

就个人而言，我希望保持OpenPaneLength不变，因为这样做对我来说看起来有点奇怪，因为 gap 之间的差距不够侧面板的物品和边缘。或者可以简单地减少它以获得最佳视觉效果。

Answer 2

我在MSDN得到了答案。在实践中，它在代码隐藏中实现了应该通过XAML绑定工作的东西。我不知道不工作的原因。

Answer 3

我不知道不工作的原因。

这是因为ActualWidth不会引发属性更改通知，应该将其视为常规CLR属性，而不是MSDN文档中所述的依赖项属性：https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.actualwidth.aspx

由于Pane中ListView的ActualWidth没有更新，您可以以编程方式设置Width而不是使用绑定：

<RelativePanel x:Name="MainSplitRelativPanel" SizeChanged="MainSplitRelativPanel_SizeChanged">
 ...
</RelativePanel>

private void MainSplitRelativPanel_SizeChanged(object sender, SizeChangedEventArgs e)
{
    HambugerMenuListView2.Width = HamburgerMenuListView1.ActualWidth;
}

ListView填写RelativePanel

3 个答案: