WPF创建边栏导航

Question

我很好奇如何创建侧边栏导航,如:

我尝试使用统一的网格,但最终"按钮"之间的间距过大,我不确定是否可以修改选项卡控件,使其像全宽按钮而不是顶部标签.

此外,如果它可能添加图标,将是一个巨大的优势.

Answer 1

您可以使用希望的宽度在标准网格中创建网格列.进入此列,您可以放置​​一个从上到下填充按钮的堆栈面板.

像那样:

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <Button Height="40">Test</Button>
            <Button Height="40">Test2</Button>
        </StackPanel>
    </Grid>

它看起来像这样:

如果我想念你,请告诉我,我会对它进行编辑.

要添加图像,您可以在Button中创建另一个网格,其中包含两列:如下所示:

            <Button>
                <Grid Height="40" Width="200">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40"/>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="pack://siteoforigin:,,,/Resources/dll.png"></Image>
                    <TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">Text</TextBlock>
                </Grid>
            </Button>

请注意,您必须将网格设置为Width ="200",就像设置主Grid.Column一样,因为如果不将其设置为200,则Grid不会是按钮的整个宽度.

然后列表看起来像这样: