Silverlightの片側丸いボタン

Question

銀色のボタンのコレクションを作りたいと思います。 彼らは左から右に行くコレクションにあり、ボタンは左右に触れるように並べられています。 ここにrubがあります： コレクションには角が丸くありますが、コレクションの最後のボタンの間にあるボタンには丸い端がありません。基本的に、コレクションの左端と右端のボタンは、フラットな垂直面と丸みを帯びた面を1つずつ持たなければならないため、やや特殊なものでなければなりません。これは終了ボタンのための特別なビットマップを作ることに頼らずにSilverlightで行うことができますか？私は何とかビットマップの背景にキャンバスを宣言され、その後、楕円を重ねてきた。ここで

 <Canvas Height="100" HorizontalAlignment="Left" Margin="189,381,0,0" VerticalAlignment="Top" Width="200" Background="Black"> 
      <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="Black" Width="58" Height="61" Canvas.Left="7" Canvas.Top="16" /> 
      <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="White" Width="65" StrokeThickness="0" Height="59" Canvas.Left="31" Canvas.Top="17" /> 
     </Canvas> 

Answer 1

を矩形持っ

ひとつのアイデアは、あなたがそれが皮膚にカスタムControlTemplateを利用して達成しようとしている効果の簡単な例であります3つの方法でボタン：

<Grid HorizontalAlignment="Center"> 
    <Grid.Resources> 
     <Style x:Key="ButtonLeftStyle" TargetType="Button"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border Background="DarkGray" CornerRadius="10,0,0,10"> 
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="ButtonCenterStyle" TargetType="Button"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border Background="DarkGray" CornerRadius="0,0,0,0"> 
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="ButtonRightStyle" TargetType="Button"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border Background="DarkGray" CornerRadius="0,10,10,0"> 
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Grid.Resources> 
    <StackPanel Orientation="Horizontal"> 
     <Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/> 
     <Rectangle Width="2"/> 
     <Button Width="75" Height="25" Style="{StaticResource ButtonCenterStyle}" Content="Center"/> 
     <Rectangle Width="2"/> 
     <Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/> 
    </StackPanel> 
</Grid> 

そして、これは次のようになります。

ここではもっと多くのことができますが、これは使用できるアプローチを示しています。ここではより多くの情報と、この技術の例と素晴らしいブログ記事です：

• Silverlight Tutorial Part 7: Using Control Templates to Customize a Control's Look and Feel

Answer 2

私は視覚的なトリックを使用して問題を解決しました。まず第一に、自分のトリックは、背景を表すイメージにボタンを配置する必要がありました。ボタンは多少透明で、この背景の色が来たので

ボタンは単純な矩形のキャンバスクラスである。終わりのボタンは丸い端を持っていましたが。

中央のボタンは最後のボタンの前にあり、それらは重なっていました。

ボタンは透明なので、中央のボタンの後ろの端のボタンの端を見ることができるため、通常は機能しません。私は、バックグラウンド画像の色で塗りつぶされた四角形を、その​​前にある端のボタンと長方形のシャープのボタンの間に「三次元の深さの言葉で考える」（三次元のレイヤー深さで考える）色付きの矩形は、それらの正方形のボタンの後ろにある終了ボタンの前に配置されていました。

これはハックのようなものでしたが、うまく機能しました。私は時間があるとき、私はここで提案された解決策を試みるでしょう。リック'Sに基づいて

Answer 3

うん、さらに簡単に、あなたは自分のボタンテンプレートの境界線の丸みを帯びた角に対処するためのスタイルを使用するよう：

<Grid HorizontalAlignment="Center"> 
    <Grid.Resources> 
    <!-- Default Template --> 
    <ControlTemplate TargetType="Button"> 
     <Border x:Name="Border" Background="DarkGray" CornerRadius="0"> 
       <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     </Border> 
    </ControlTemplate> 
    <!-- Custom Styles for edges --> 
    <Style x:Key="ButtonLeftStyle" TargetType="Button"> 
     <Setter Property="CornerRadius" Value="10,0,0,10" TargetName="Border"/> 
    </Style> 
    <Style x:Key="ButtonRightStyle" TargetType="Button"> 
     <Setter Property="CornerRadius" Value="0,10,10,0" TargetName="Border"/> 
    </Style> 
</Grid.Resources> 
<StackPanel Orientation="Horizontal"> 
    <Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/> 
    <Rectangle Width="2"/> 
    <Button Width="75" Height="25" Content="Center"/> 
    <Rectangle Width="2"/> 
    <Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/> 
</StackPanel>