CODEWITHSUNDEEP
c#silverlight
awe
awe

Reputation: 39

xaml how to create a circle button with bound color

How do I create a circle shape button but with the color affected by binding.

I have already something like this:

<Button  Command="{Binding ShowDetails}" Background="{Binding Color} />

and the color that will be received will be of this format, for example: Colors.LightGray

Can anyone help me?

Upvotes: 1

Views: 8347

Answers (3)

Slyvain
Slyvain

Reputation: 1732

With the color binding :

<UserControl.Resources>
        <Color x:Key="MyColor">LightGray</Color>

        <Style x:Key="RoundButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Width="40" Height="40" Stroke="#FF000000" StrokeThickness="1" Canvas.Left="141" Canvas.Top="61">
                                <Ellipse.Fill>
                                    <SolidColorBrush Color="{StaticResource MyColor}" />
                                </Ellipse.Fill>
                            </Ellipse>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>


<Grid x:Name="LayoutRoot" Background="White">
      <Button Style="{StaticResource RoundButton}" />
</Grid>

Enjoy ;)

Upvotes: 0

Haris Hasan
Haris Hasan

Reputation: 30097

You will have to write the control template for the button like this

 <Button Content="MyButton">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Ellipse Fill="{TemplateBinding Background}"/>
                    <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

Upvotes: 0

ColinE
ColinE

Reputation: 70122

If you google for "circular button template silverlight" you will find lots of blog posts that describe this process. Including previous StackOverflow questions:

Silverlight: Creating a round button template

The basic steps are

  1. Create a new ControlTemplate for your buttons that renders a circle, using an Ellipse for example.
  2. If you want your Buttton.Background to set the Fill color, then use a TemplateBinding for the Ellipse.Fill property.

For example:

 <Button Content="MyButton">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Fill="{TemplateBinding Background}"/>
                <ContentPresenter Content="{TemplateBinding Content}"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

Upvotes: 3

Related Questions