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

Question

これはWPFには新しく、これは私にとっては複雑な問題です。私が欲しいのは、底面の "パネル"です。高さは50pxです。そのパネルに、私は欲しいです。バーの中央に3つのイメージボタン（任意の数）があります。そして、それぞれのボタンをホバーすると、サイズが大きくなるはずです。 10 pxだからクールに見える。最も重要なのは、バーとボタンを作る方法、2番目にホバー効果を作る方法ですか？

Answer 1

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

ここにいくつかのコードを試してみましょう。 DockPanelを使用すると、ドッキングしたいものを最初に配置し、残りのものはドッキングする必要はなく、LastChildFillは残りの領域を埋めます。

私はレイアウト用のグリッドが好きです。私はカラムに '*'幅を使用しました。つまり、HTMLのように 'remaning space'を意味します。 > 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>