wpf - WPF如何制作导航控件

Question

作为 WPF 的新手，这对我来说是一个复杂的问题。我想要的是底部大约的“面板”。高度为 50 像素。在那个面板上，我想要例如 3 个图像按钮（任意数字）在栏中居中。当我将每个按钮悬停时，它们的大小应该会增加 10 像素，所以看起来很酷。最重要的是，如何制作bar和buttons，其次如何制作悬停效果？

Answer 1

使用 DockPanel 固定底部的“栏”，使用网格来获取间距和触发器来控制增长。

这里有一些代码可以尝试。使用 DockPanel，您可以先放置要停靠的东西，然后不需要停靠剩下的任何东西，并使用 LastChildFill 填充剩余空间。

我喜欢 Grids 的布局。我在列上使用了“*”宽度：它们表示 HTML 中的“剩余空间”。如果使用 > 1，WPF 会平均分配剩余空间。所以你会得到居中、间隔的按钮。

而且我使用了样式触发器来实现增长。这些值是相对的，不是绝对的，因此中心为 0.5（即按钮的中间/向下），比例为 1.1。因为我不知道你的按钮会有多大，所以我不能给你比例因子，但如果你想要 10px（而不是我给出的 10%），把你的计算器拿出来做（（宽度+ 10)/width) 作为宽度比例因子，同样适用于高度。

<Grid>
    <Grid.Resources>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="RenderTransformOrigin" Value=".5,.5" />
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>

    <DockPanel LastChildFill="True">

        <Grid DockPanel.Dock="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="1" Margin="6"
                    Content="Button 1" />
            <Button Grid.Column="2" Margin="6"
                    Content="Button 2" />
            <Button Grid.Column="3" Margin="6"
                    Content="Button 3" />
        </Grid>

        <Grid>
            <Label>Hello</Label>
        </Grid>
    </DockPanel>
</Grid>