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不会是按钮的整个宽度。

然后列表看起来像这样：