views:

221

answers:

1

I have a controltemplate for buttons. I want to make the buttons with rounded corners. How should I do this?

I tried CornerRadius for button in the Border but it doesn't work. The background of the button has set to an image that has corner borders and the button looks akward as I can't set the corners for the button.

<Style TargetType="{x:Type btncontrol:StatusBarButtonControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type btncontrol:StatusBarButtonControl}">
                    <Grid>
                        <Border CornerRadius="50">
                            <Image x:Name="img" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NormalImage}" />
                        </Border>
                        <ContentPresenter />
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ImageColumWidth}" />
                                <ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextColumnWidth}" />
                            </Grid.ColumnDefinitions>
                            <Image x:Name="icon"  Grid.Column="0" Height="28" Width="36" Margin="8"  Source="{Binding RelativeSource={RelativeSource TemplatedParent},Path=NormalIcon}"/>
                            <TextBlock Grid.Column="1" Height="Auto" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="16" FontFamily="Arial" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=ButtonText}"></TextBlock>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="img" 
                                  Property="Source"   
                                  Value="{Binding RelativeSource={RelativeSource TemplatedParent},
                                            Path=MouseOverImage}" />

                            <Setter TargetName="icon" 
                                  Property="Source"   
                                  Value="{Binding RelativeSource={RelativeSource TemplatedParent},
                                            Path=MouseOverIcon}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="img" 
                                  Property="Source" 
                                  Value="{Binding RelativeSource={RelativeSource TemplatedParent},
                                            Path=MousePressImage}"/>

                            <Setter TargetName="icon" 
                                  Property="Source" 
                                  Value="{Binding RelativeSource={RelativeSource TemplatedParent},
                                            Path=MousePressIcon}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="img" 
                                  Property="Source" 
                                  Value="{Binding RelativeSource={RelativeSource TemplatedParent},
                                            Path=DisableImage}"/>

                            <Setter TargetName="icon" 
                                  Property="Source" 
                                  Value="{Binding RelativeSource={RelativeSource TemplatedParent},
                                            Path=DisableIcon}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
+1  A: 

just try this

<Style x:Key="GlassButton" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="42" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type Button}">
      <Border x:Name="border" 
              CornerRadius="25" 
              BorderThickness="4" 
              Background="#AA000000"  
              BorderBrush="Red"
              RenderTransformOrigin="0.5,0.5">
          <ContentPresenter x:Name="ButtonContentPresenter"
                            VerticalAlignment="Center"  
                            HorizontalAlignment="Center"/>
      </Border>

<ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="border" Property="BorderBrush" Value="#FF4788c8" />
                <Setter Property="Foreground" Value="#FF4788c8" />
            </Trigger>
            <Trigger Property="IsPressed" Value="True">                 
                <Setter Property="Background" >
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                        <GradientStop Color="#FFFFD190" Offset="0.35"/>
                        <GradientStop Color="Orange" Offset="0.95"/>
                        <GradientStop Color="#FFFFD190" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
                </Setter>
                <Setter TargetName="content" Property="RenderTransform" >
                <Setter.Value>
                    <TranslateTransform Y="1.0" />
                </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsDefaulted" Value="True">
                <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
            </Trigger>
            <Trigger Property="IsFocused" Value="True">
                <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="border" Property="Opacity" Value="0.7" />
                <Setter Property="Foreground" Value="Gray" />
            </Trigger>

        </ControlTemplate.Triggers>
  </ControlTemplate>
  </Setter.Value>
</Setter>  </Style
Kishore Kumar