Tutorial :How to make clickable color areas with rounded corners in WPF, Button or Border/Textarea?


I want to have four colored areas which are clickable. I can user TextBlock in a Border to get the color areas, but then neither of them have a Click event. So I can make the whole thing a button, but then it doesn't have rounded corners and I can't seem to change the background.

What is the recommended way to go about this, here is what I have so far:

<Window x:Class="WpfApplication6.Window7"      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"      Title="Window7" Height="300" Width="300">      <UniformGrid>          <UniformGrid.Resources>              <Style TargetType="{x:Type TextBlock}">                  <Setter Property="FontSize" Value="20"/>                  <Setter Property="HorizontalAlignment" Value="Center"/>                  <Setter Property="VerticalAlignment" Value="Center"/>              </Style>          </UniformGrid.Resources>          <Button BorderThickness="1px" Margin="10" BorderBrush="Blue" CornerRadius="33" Background="Orange">testing1</Button>          <Border BorderThickness="1px" Margin="10" BorderBrush="Blue" CornerRadius="10" Background="Yellow">              <TextBlock>testing2</TextBlock>          </Border>          <Border BorderThickness="1px" Margin="10" BorderBrush="Blue" CornerRadius="10" Background="LightBlue">              <TextBlock>testing3</TextBlock>          </Border>          <Border BorderThickness="1px" Margin="10" BorderBrush="Blue" CornerRadius="10" Background="LightGreen">              <TextBlock>testing4</TextBlock>          </Border>      </UniformGrid>  </Window>  


You have to define a custom template for your button

For example:

<UniformGrid>    <UniformGrid.Resources>      <ControlTemplate x:Key="buttonTemp">        <Border Margin="10" CornerRadius="10" Background="Yellow">          <TextBlock Text="{TemplateBinding Button.Content}"/>        </Border>      </ControlTemplate>    </UniformGrid.Resources>    <Button Template="{StaticResource buttonTemp}">testing1</Button>  </UniformGrid>  

See also http://mark-dot-net.blogspot.com/2007/07/creating-custom-wpf-button-template-in.html


I believe you can also do something like this although I haven't tried it.

<Border CornerRadius="5" ButtonBase.Click="ButtonClickHandler" />  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »