WPF Style Setter * Height and Width

Question

I'm trying to create a WPF application which consists of a 9x9 grid with the row and columns using different styles. What I'm hoping to do is provide a star value for the height and width of the column and row definitions. This does not appear to work in the current context. Is this even possible, and if so, how?

<Window x:Class="BaroqueChessUI.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="500" Width="500">
<Window.Resources>
    <Style x:Key="LightBackground" >
        <Setter Property="Control.Background" Value="Teal" />
    </Style>
    <Style x:Key="DarkBackground" >
        <Setter Property="Control.Background" Value="Maroon" />
    </Style>
    <Style x:Key="FileStyle">
        <Setter Property="Control.Width" Value="0.12" />
    </Style>
    <Style x:Key="RankStyle">
        <Setter Property="Control.Height" Value="0.12" />
    </Style>
    <Style x:Key="FileHeadingStyle">
        <Setter Property="Control.Width" Value="0.04" />
    </Style>
    <Style x:Key="RankHeadingStyle">
        <Setter Property="Control.Height" Value="0.04" />
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Name="rdRank" Style="{StaticResource FileHeadingStyle}" />
        <RowDefinition Name="rdRank1" Style="{StaticResource FileStyle}" />
        <RowDefinition Name="rdRank2" Style="{StaticResource FileStyle}" />
        <RowDefinition Name="rdRank3" Style="{StaticResource FileStyle}" />
        <RowDefinition Name="rdRank4" Style="{StaticResource FileStyle}" />
        <RowDefinition Name="rdRank5" Style="{StaticResource FileStyle}" />
        <RowDefinition Name="rdRank6" Style="{StaticResource FileStyle}" />
        <RowDefinition Name="rdRank7" Style="{StaticResource FileStyle}" />
        <RowDefinition Name="rdRank8" Style="{StaticResource FileStyle}" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Name="cdFile" Style="{StaticResource RankHeadingStyle}" />
        <ColumnDefinition Name="cdFile2" Style="{StaticResource RankStyle}" />
        <ColumnDefinition Name="cdFile3" Style="{StaticResource RankStyle}" />
        <ColumnDefinition Name="cdFile4" Style="{StaticResource RankStyle}" />
        <ColumnDefinition Name="cdFile5" Style="{StaticResource RankStyle}" />
        <ColumnDefinition Name="cdFile6" Style="{StaticResource RankStyle}" />
        <ColumnDefinition Name="cdFile7" Style="{StaticResource RankStyle}" />
        <ColumnDefinition Name="cdFile8" Style="{StaticResource RankStyle}" />
    </Grid.ColumnDefinitions>
</Grid>

Answer 1

A grid column definition / row definition define layout, and within the defined areas you should add controls which should be styled (using the attched properties as you are could get tedious), so try not styling the rowdefintions / columnsdefinitions themselves.

Styling Items:

You can enter a control into a row / column like so (sorry if i'm patronizing):

<Rectangle Grid.Row="0" Grid.Column="0" ></Rectangle>

Then define the Style on the control within the Row/Column.

<Rectangle Grid.Row="0" Grid.Column="0" Style="{StaticRsource DarkBackground}"></Rectangle>

Sizing (Star Values):

Note: that the Grid will dynamically fill the available area as your code stands and you will only need to apply star values if you define a fixed hight and width to the Grid and want proportional allocation of remaining space.

In other words.. With regards to achieving "star value":

What I'm hoping to do is provide a star value for the height and width of the column and row definitions.

Why not just enter the value like so to your definitions:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Name="rdRank" Height="500" />
            <RowDefinition Name="rdRank1" Height="60*" />
            <RowDefinition Name="rdRank2" Style="40*" />
        </Grid.RowDefinitions>
     </Grid>

In this example the rowdefinition named "rdRank" would have a fixed height of "500", and the remaining space would be allocated to "rdRank1" which would take up 60% and "rdRank2" 40%.

**Attached Properties: **

In your style:

    <Style x:Key="RankStyle">
        <Setter Property="Control.Height" Value="0.12" />
    </Style>

You are stating any control within the item this style is applied to that has a property called Height should take the value of 0.12. Control.Height will end up filtering down so to speak.

If you are aiming to achieve a height of 0.12* on the Row use:

    <Style x:Key="NewRankStyle" TargetType="{x:Type RowDefinition}">
        <Setter Property="Height" Value="0.12*" />
    </Style>

..

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Name="rdRank"  Style="{StaticResource FileHeadingStyle}" />
        <RowDefinition Name="rdRank1" Style="{StaticResource NewRankStyle}" />

Using a 'TargetType' allows you to target Type specific properties and as a result allows use of Star Values.

Hope this clears a few concepts up for you.

Regards..

Answer 2

The row or column star sizing only works if you give the grid a width and height. If the grid is auto-sizing based on it's content, then star sizing doesn't work.