WPF如何进行导航控制

时间:2009-09-03 09:50:23

标签: wpf navigation hover

成为WPF的新手这对我来说是一个复杂的问题。我想要的是底部的“面板”。高度50px。在那个小组我想要,例如在条形图中心的3个图像按钮(任意数字)。当我将每个按钮悬停时,它们的大小应该增大,例如: 10 px所以看起来很酷。最重要的是,如何制作条形和按钮,其次是如何制作悬停效果?

1 个答案:

答案 0 :(得分:1)

使用DockPanel修复底部的“条形图”,使用网格来获取间距,并使用触发器来控制增长。

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

我喜欢网格布局。我在列上使用了'*'宽度:它们意味着像HTML中那样“重写空间”。如果你使用> 1,WPF平均分配剩余空间。所以你得到居中,间隔的按钮。

我使用了Style触发器来实现增长。这些值是相对的,而不是绝对的,因此中心为0.5(即按钮的中间/下方),并且标度为1.1。因为我不知道你的按钮的大小,我不能给你比例因子,但如果你想要10px(而不是我给出的10%),你可以拿出你的计算器((宽度) + 10)/宽度)表示您的宽度比例系数,同样适用于高度。

<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>