<Window
  x:Class="DataDrivenUiSample.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:DataDrivenUiSample"
  Title="TicTacToe"
  Height="350"
  Width="350">
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="Background" Value="White" />
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="VerticalContentAlignment" Value="Stretch" />
      <Setter Property="Padding" Value="8" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
              <Rectangle Fill="{TemplateBinding Property=Background}" Name="rect" />
              <ContentPresenter Margin="{TemplateBinding Property=Padding}" />
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="rect" Property="BitmapEffect">
                  <Setter.Value>
                    <OuterGlowBitmapEffect GlowColor="Yellow" />
                  </Setter.Value>
                </Setter>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="Content" Value="{x:Null}" >
          <Setter Property="ToolTip" Value="click to move here" />
        </Trigger>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsFocused" Value="True" />
            <Condition Property="Content" Value="{x:Null}" />
          </MultiTrigger.Conditions>
          <Setter Property="ToolTip" Value="click or spacebar to move here" />
        </MultiTrigger>
      </Style.Triggers>
    </Style>
    <Style x:Key="StatusTextStyle" TargetType="{x:Type TextBlock}">
      <Setter Property="FontSize" Value="32pt" />
      <Setter Property="FontWeight" Value="Thin" />
      <Setter Property="Foreground" Value="White" />
      <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>
    <Style x:Key="CellTextStyle" TargetType="{x:Type TextBlock}">
      <Setter Property="FontSize" Value="32pt" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Style.Triggers>
        <DataTrigger Binding="{Binding Path=PlayerName}" Value="X">
          <Setter Property="Foreground" Value="Red" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=PlayerName}" Value="O">
          <Setter Property="Foreground" Value="Green" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
    <Style x:Key="MoveNumberStyle" TargetType="{x:Type TextBlock}">
      <Setter Property="FontSize" Value="16pt" />
      <Setter Property="FontStyle" Value="Italic" />
      <Setter Property="VerticalAlignment" Value="Bottom" />
      <Setter Property="HorizontalAlignment" Value="Right" />
      <Style.Triggers>
        <MultiDataTrigger>
          <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding Path=PlayerName}" Value="X" />
            <Condition Binding="{Binding Path=IsPartOfWin}" Value="True" />
          </MultiDataTrigger.Conditions>
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="Red" GlowSize="10" />
            </Setter.Value>
          </Setter>
        </MultiDataTrigger>
        <MultiDataTrigger>
          <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding Path=PlayerName}" Value="O" />
            <Condition Binding="{Binding Path=IsPartOfWin}" Value="True" />
          </MultiDataTrigger.Conditions>
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="Green" GlowSize="10" />
            </Setter.Value>
          </Setter>
        </MultiDataTrigger>
      </Style.Triggers>
    </Style>
    <DataTemplate DataType="{x:Type local:PlayerMove}">
      <Grid>
        <TextBlock
          Text="{Binding Path=PlayerName}"
          Style="{StaticResource CellTextStyle}" />
        <TextBlock
          Text="{Binding Path=MoveNumber}"
          Style="{StaticResource MoveNumberStyle}" />
      </Grid>
    </DataTemplate>
  </Window.Resources>
  <DockPanel>
    <Grid Background="Black">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <Menu Grid.Row="0">
        <MenuItem Header="_Game">
          <MenuItem Header="_3x3 Game" Name="threeByThreeMenuItem" />
          <MenuItem Header="_4x4 Game" Name="fourByFourMenuItem" />
          <MenuItem Header="_5x5 Game" Name="fiveByFiveMenuItem" />
        </MenuItem>
      </Menu>

      <ItemsControl Grid.Row="1" ItemsSource="{Binding Cells}">
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <UniformGrid />
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <Button Margin="2" 
              Content="{Binding Move}"
                    Tag="{Binding CellNumber}"
                    Click="cell_Click" />
          </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.Template>
          <ControlTemplate TargetType="{x:Type ItemsControl}">
            <Grid>
              <Rectangle Fill="Green" RadiusX="20" RadiusY="20" />
              <ItemsPresenter Margin="20" />
            </Grid>
          </ControlTemplate>
        </ItemsControl.Template>
      </ItemsControl>

      <TextBlock Grid.Row="2" Style="{StaticResource StatusTextStyle}" FontWeight="Normal" Foreground="White">
        It's your move, <TextBlock Text="{Binding CurrentPlayer}" />
      </TextBlock>
    </Grid>
  </DockPanel>
</Window>
