Sunday, February 28, 2010

Shatranj – Convert to Control (2 of 3): ControlTemplate to replace default UI

Our first task is to prevent the RadioButton’s default UI from showing up.  Let’s move the ContentPresenter inside Style into a ControlTemplate:

    1 <RadioButton x:Class="Shatranj.BoardSquareView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Shatranj="clr-namespace:Shatranj" Background="{Binding Converter={StaticResource LocationToColorConverter}}">

    2 

    3     <RadioButton.Resources>

    4         <Style TargetType="{x:Type Shatranj:BoardSquareView}">

    5             <Setter Property="Template">

    6                 <Setter.Value>

    7                     <ControlTemplate>

    8                         <ContentPresenter>

    9                             <ContentPresenter.Content>

   10                                 <Grid>

   11                                     <Grid.RowDefinitions>

   12                                         <RowDefinition Height="0.200*" />

   13                                         <RowDefinition Height="0.800*" />

   14                                     </Grid.RowDefinitions>

   15                                     <Grid.ColumnDefinitions>

   16                                         <ColumnDefinition />

   17                                     </Grid.ColumnDefinitions>

   18 

   19                                     <Viewbox Grid.Row="0" Grid.Column="0"

   20                                             HorizontalAlignment="Right" VerticalAlignment="Stretch">

   21                                         <TextBlock FontSize="12"

   22                                                   FontFamily="Consolas"

   23                                                   Text="{Binding Path=AlgebraicIdentity, Mode=OneWay}" />

   24                                     </Viewbox>

   25                                     <Viewbox Grid.RowSpan="2" Grid.Row="0"

   26                                             HorizontalAlignment="Center" VerticalAlignment="Center">

   27                                         <TextBlock FontFamily="Chess Cases"

   28                                                   Margin="3,3,3,3"

   29                                                   Text="{Binding Path=CurrentPiece.AltChar, Mode=OneWay}" />

   30                                     </Viewbox>

   31 

   32                                     <Ellipse MaxHeight="30" MaxWidth="30"

   33                                             MinHeight="10"

   34                                             MinWidth="10"

   35                                             Fill="Aqua"

   36                                             Grid.Row="0" Grid.RowSpan="2"

   37                                             Visibility="{Binding IsHit,

   38                                                Converter={StaticResource BoolToVisibilityConverter}}" />

   39                                 </Grid>

   40                             </ContentPresenter.Content>

   41                         </ContentPresenter>

   42                     </ControlTemplate>

   43 

   44                 </Setter.Value>

   45             </Setter>

   46             <Style.Triggers>

   47                 <Trigger Property="IsMouseOver" Value="true">

   48                     <Setter Property="Foreground" Value="Red" />

   49                     <Setter Property="Background" Value="Black" />

   50                     <Setter Property="BorderBrush" Value="Red" />

   51                     <Setter Property="BorderThickness" Value="2" />

   52                 </Trigger>

   53             </Style.Triggers>

   54         </Style>

   55         <Shatranj:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />

   56     </RadioButton.Resources>

   57 </RadioButton>

Oops…  The BoolToVisibilityConverter should also be moved into <ControlTemplate.Resources> so it becomes accessible from inside the ControlTemplate.

    5             <Setter Property="Template">

    6                 <Setter.Value>

    7                     <ControlTemplate>

    8                         <ControlTemplate.Resources>

    9                             <Shatranj:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />

   10                         </ControlTemplate.Resources>

   11                         <ContentPresenter>

   12                             <ContentPresenter.Content>

ShatranjWithControlTemplatedBoardSquareView

No color squares?  Strange.  Let’s move the background to Style:

    1 <RadioButton x:Class="Shatranj.BoardSquareView"

    2             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    3             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    4             xmlns:Shatranj="clr-namespace:Shatranj">

    5 

    6     <RadioButton.Resources>

    7         <Style TargetType="{x:Type Shatranj:BoardSquareView}">

    8             <Setter Property="Background" Value="{Binding Converter={StaticResource LocationToColorConverter}}"/>

Same result!  Well, I would have been surprised if it’d been otherwise.  Local values always override values set by Styles!  So what could be the problem?

No comments: