WPF 创建侧边栏导航

Question

我很好奇如何创建类似于这样的侧边栏导航：

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

此外，如果可以添加图标，那将是一个巨大的优势。

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>

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

然后列表将如下所示：

WPF 创建侧边栏导航

WPF Create Sidebar Navigation

c#

wpf

visual-studio

modern-ui