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

Question

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>

Answer 1

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

Answer 2

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

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

Answer 3

You would think the ButtonBase.Click would work for Border or TextBlock. It doesn't. Microsoft XAML parser should at least muster up a design time error message for that.