レイアウトおよび外観

以下のトピックでは、C1Toolbar コントロールのレイアウトと外観をカスタマイズする方法について詳しく説明します。組み込みのレイアウトオプションを使用して、グリッドやキャンバスなどのコントロールをパネル内でレイアウトできます。

スタックパネルを使用して、ツールバー項目の外観をカスタマイズできます。スタックパネル内では、ツールバー項目の方向を指定できます。さらに、画像やテキストを追加できます。テキストの配置、フォントスタイル、および色を変更できます。

XAML	コードのコピー
<c1tb:C1Toolbar> <c1tb:C1ToolbarGroup Header="クリップボード"> <c1tb:C1ToolbarStrip Padding="0"> <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left"> <StackPanel Orientation="Horizontal" > <Image Grid.Column="1" Source="Resources/cut.png" Margin="7 0 7 0"/> <TextBlock Text="切り取り" Foreground= "DarkOrange" VerticalAlignment="Center" TextAlignment="Center" /> </StackPanel> </c1tb:C1ToolbarButton> </c1tb:C1ToolbarStrip> <c1tb:C1ToolbarStrip Padding="0"> <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left" > <StackPanel Orientation="Horizontal"> <Image Source="Resources/copy.png" Margin="4 0 4 0"/> <TextBlock Text="コピー" VerticalAlignment="Center" TextAlignment="Center"/> </StackPanel> </c1tb:C1ToolbarButton> </c1tb:C1ToolbarStrip> <c1tb:C1ToolbarStrip Padding="0"> <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left"> <StackPanel Orientation="Horizontal"> <Image Source="Resources/paste.png" Margin="4 0 4 0"/> <TextBlock Text="貼り付け" VerticalAlignment="Center" TextAlignment="Center"/> </StackPanel> </c1tb:C1ToolbarButton> </c1tb:C1ToolbarStrip> </c1tb:C1ToolbarGroup> </c1tb:C1Toolbar>

XAML

コードのコピー

<c1tb:C1Toolbar>
 <c1tb:C1ToolbarGroup Header="クリップボード">
   <c1tb:C1ToolbarStrip Padding="0">
     <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left">
        <StackPanel Orientation="Horizontal" >
         <Image Grid.Column="1" Source="Resources/cut.png" Margin="7 0 7 0"/>
         <TextBlock Text="切り取り" Foreground= "DarkOrange" VerticalAlignment="Center" TextAlignment="Center" />
           </StackPanel>
    </c1tb:C1ToolbarButton>
   </c1tb:C1ToolbarStrip>
   <c1tb:C1ToolbarStrip Padding="0">
      <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left" >
        <StackPanel Orientation="Horizontal">
      <Image Source="Resources/copy.png"  Margin="4 0 4 0"/>
   <TextBlock Text="コピー" VerticalAlignment="Center" TextAlignment="Center"/>
        </StackPanel>
      </c1tb:C1ToolbarButton>
    </c1tb:C1ToolbarStrip>
  <c1tb:C1ToolbarStrip Padding="0">
     <c1tb:C1ToolbarButton Width="60" HorizontalContentAlignment="Left">
          <StackPanel Orientation="Horizontal">
            <Image Source="Resources/paste.png"  Margin="4 0 4 0"/>
           <TextBlock Text="貼り付け" VerticalAlignment="Center" TextAlignment="Center"/>
        </StackPanel>
      </c1tb:C1ToolbarButton>
    </c1tb:C1ToolbarStrip>
  </c1tb:C1ToolbarGroup>
</c1tb:C1Toolbar>