wpf - WPF ナビゲーション コントロールの作成方法

Question

WPF は初めてなので、これは私にとって複雑な問題です。私が欲しいのは、一番下の「パネル」です。高さ50px。そのパネルでは、たとえば、バーの中央に3つのイメージボタン（任意の数）が必要です。そして、各ボタンにカーソルを合わせると、たとえば 10 px ずつサイズが大きくなり、見栄えが良くなります。最も重要なのは、バーとボタンを作成する方法です。次に、ホバー効果を作成する方法です。

Answer 1

DockPanel を使用して下部の「バー」を固定し、グリッドを使用して間隔を取得し、トリガーを使用して成長を制御します。

試してみるコードを次に示します。DockPanel を使用すると、最初にドッキングしたいものを配置し、次に残ったものをドッキングする必要がなくなり、LastChildFill を使用して残りのスペースを埋めます。

レイアウト用のグリッドが好きです。列に「*」幅を使用しました。これは、HTML のように「残りのスペース」を意味します。> 1 を使用すると、WPF は残りのスペースを均等に分割します。そのため、中央に配置されたボタンが配置されます。

そして、スタイルトリガーを使用して成長を達成しました。これらの値は絶対値ではなく相対値であるため、中心は 0.5 (つまり、ボタンの中央/下) で、スケールは 1.1 です。あなたのボタンのサイズがわからないので、倍率を教えることはできませんが、10px (私が与えた 10% ではなく) が必要な場合は、電卓を取り出して ((width + 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>