One-sided rounded buttons in Silverlight

I want to make a collection of buttons in silverlight. They are in a collection that goes from left to right and the buttons are lined up so that they are touching on the left and right sides. Here is the rub: The collection has rounded corners but the buttons in between the end buttons in the collection do not have rounded ends. So basically, for the buttons on the far left and right side of the collection, they have to be somewhat special because they have to have one flat vertical side and one rounded side. Is this possible to do in silverlight without resorting to making a special bitmap for the end buttons?

One idea I have is somehow declare a canvas with a bitmap background and then have overlapping ellipse and rectangle

        <Canvas Height="100" HorizontalAlignment="Left" Margin="189,381,开发者_C百科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> 

Here is a simple example of the effect you are trying to achieve that utilizes custom ControlTemplate to skin the buttons in three ways:

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

And this looks like:

There's a lot more you can do here but this shows an approach you can use. Here's a great blog article with more information and examples of this technique:

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

I solved the problem by using a visual trick. First of all, my trick required I placed the buttons on an image that would represent the background. The buttons were somewhat transparent so the color of this background came through

The buttons in the middle be simple rectangle canvas classes. While the end buttons had rounded ends.

The middle buttons were in front of the buttons on the end and they overlapped them.

The buttons were transparent and so normally it would not work because you would be able to see the end buttons edges behind the middle buttons. I solved this by putting a rectangle filled with the color of the background image "between" (think in 3D layered depth terms) the end buttons and the rectangle shapped buttons in front of it. The colored rectangles only were positioned in front of the end buttons that were behind the rectangle buttons in front of them.

This was kind of a hack but it worked. When I have time, I will try the solutions suggested here.

Yeah, even simpler, based on Rick'S, as you just want to use the styles to address the rounded corners of your button template border:

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