Applying WPF styles to Child Items - wpf

Lets say I have a grid, within my grid I have a number of controls. Instead of setting the margin for each of these controls, I wish to create a style to set the margin for ANY control I drop into a grid. Is this possible?
I was hoping that the following would work:
<Window.Resources>
<Style x:Key="DefaultMargins">
<Setter Property="Control.Margin" Value="3, 3, 3, 3"/>
<Setter Property="Control.FontSize" Value="50"/>
</Style>
</Window.Resources>
<Grid Style="{StaticResource DefaultMargins}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Name="button1">Button</Button>
</Grid>
But the Margin is ignored, it not supporting property value inheritance. Is there a simple alternative to apply the margins to each 'child' of the grid? I understand that it is possible to achieve this sort of thing in CSS and some of our developers are interested in using this sort of construct.
Thanks
Ian

You can specify the style by type and constrain it to the scope of the Grid:
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Control}">
<Setter Property="Control.Margin" Value="3, 3, 3, 3"/>
<Setter Property="Control.FontSize" Value="50"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Name="button1">Button</Button>

This seems to answer a similar question to yours:
Apply style to all TreeViewItem
If that doesn't work then I'm not too sure about how it would be done in XAML but you could add the style in the code-behind with:
Control element;
for (int i = 0; i < Grid1.Children.Count; i++)
{
element = (Control) Grid1.Children[i];
element.Style = (Style) FindResource("DefaultMargins");
}
Edit: Grid1 refers to a x:Name="Grid1" property added to the XAML grid (poor naming I know).

Place elements inside ItemsControl with ItemsPanel set to Grid and ItemContainerStyle to your style:
<Window.Resources>
<Style x:Key="DefaultMargins">
<Setter Property="Control.Margin"
Value="3, 3, 3, 3" />
<Setter Property="Control.FontSize"
Value="50" />
</Style>
</Window.Resources>
<ItemsControl ItemContainerStyle="{StaticResource DefaultMargins}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="3*" />
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Button Grid.Row="0"
Grid.Column="0"
Name="button1">Button</Button>
</ItemsControl>
This has a drawback of not working well with designer.

Related

Enable Button if One of Three Textboxes across 3 tabs has content

I have a Button that lives outside a tab control element. Each Tab on the TabControl has either a text box for manual text entry or a search tool to look up something from a database (the value of which will also be written to the label in tab 2 & 3).
I want to enable the Print button if the textbox has content or a variable that is populated from a database query on the selected tab has content.
What would be the best way to do this, given a button can only be bound to one source? I pondered having a staging variable, but then that would also be only bound to one element.
Any ideas? I'm really new to data-binding and I'm struggling to get my head around some of the concepts.
It doesn't help that the back-end is in VB because i'm porting a number of WinForms apps to WPF and I want to do them properly.
Quick XAML:
<Window x:Name="Main1" x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" SizeToContent="Height">
<Grid>
<StackPanel >
<Grid x:Name="Activity" Margin="5,5,5,0" >
<StackPanel>
<TabControl x:Name="Main_Tabs" Background="{x:Null}" BorderBrush="Gainsboro">
<TabItem x:Name="T1" Header="H1" >
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right">Address:</Label>
<TextBox x:Name="Single_Address"
Margin="5,3"
SpellCheck.IsEnabled="True"
IsManipulationEnabled="True"
TextWrapping="Wrap"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"
Grid.Column="1" Grid.Row="2"
Language="en-GB" Height="80">
</TextBox>
</Grid>
</TabItem>
<TabItem x:Name="T2" Header="H2" >
<Grid Grid.ColumnSpan="2" Grid.Row="1" x:Name="Grid_Elucid_Label2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right">Address:</Label>
<Label x:Name="Elucid_Address"
Margin="5,3"
Grid.Column="1" Grid.Row="2" Height="80">
</Label>
</Grid>
</TabItem>
<TabItem x:Name="T3" Header="H3">
<Grid x:Name="Grid_Sage_Label" Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right">Address:</Label>
<Label x:Name="Sage_Address" Margin="5,3" Grid.Column="1" Grid.Row="2" Height="80">
</Label>
</Grid>
</TabItem>
</TabControl>
</StackPanel>
</Grid>
<Button x:Name="Print_Button" Content="Print" Padding="10" Background="{x:Null}" BorderBrush="Gainsboro" />
</StackPanel>
</Grid>
</Window>
#1 VM with few textproperties to evaluate
if you have just a few text properties and use a VM, you can go with some triggers.
I wrote this by hand so I'm sorry if the syntax isn't a 100% match.
<button content="print">
<button.style>
<style targettype={x:type button}>
<style.triggers>
<multidatatrigger>
<multidatatrigger.conditions>
<condition Binding="{Binding VMprop1}" Value="">
<condition Binding="{Binding VMprop2}" Value="">
<condition Binding="{Binding VMprop3}" Value="">
</multidatatrigger.conditions>
<multidatatrigger.setters>
<setter property="IsEnabled" value="false"/>
</multidatatrigger.setters>
</multidatatrigger>
</style.triggers>
</style>
</button.style>
<button>
2 no VM or a lot of properties to evaluate
bind to the TextChanged of all TextBoxes and evaluate their state, and set the IsEnabled from your button (if you want use a Dependency Property)
<button x:Name="btn1" content="print" IsEnabled="{Binding CanPrint}"/>
<textbox x:Name="tb1" TextChanged="EvaluateCanPrint"/>
<textbox x:Name="tb2" TextChanged="EvaluateCanPrint"/>
<textbox x:Name="tb3" TextChanged="EvaluateCanPrint"/>
<textbox x:Name="tb4" TextChanged="EvaluateCanPrint"/>
...
private void EvaluateCanPrint() {
// ViewModel.EvaluateCanPrint();
ViewModel.CanPrint =
!string.isNullOrEmpty(tb1.Text) &&
!string.isNullOrEmpty(tb2.Text) &&
...;
}
// Original answer
//private void EvaluateTextChanged() {
// if (string.isNullOrEmpty(tb1.Text) &&
// string.isNullOrEmpty(tb2.Text) &&
// ...)
// {
// btn1.IsEnabled = false;
// }
//}

Why doesn't the ScrollViewer limit vertical expansion?

I've been working with WPF for several years, now, yet the layout mechanism often makes me feel like a noob (and maybe I still am). My page is fairly complex. Below, I've eliminated much of the unrelated content, but left the general structure of the page in tact. I have two ItemsControls. Both have ScrollViewers. They both used to have the ScrollViewrs wrapping the <ItemsPresenter />. A post I saw had me try moving the first one to wrap the entire ItemsControl to see if that fixed my issue. It did not.
The main differences between the ItemsControls is that the first has a series of DataTemplates for the content, where the second defines the content inline.
Everything displays properly with the exception that the first one forces its Grid cell to expand to accommodate all content, rather than enabling the vertical scroll bar. The second instance, properly activates the ScrollViewer when the content is to long.
What am I missing? (Hopefully something stupid I just missed.)
Here's my XAML:
<vsupport:CBUserControlBase x:Class="CB.WPFClient.Views.BillingMasterView" ... >
<vsupport:CBUserControlBase.Resources>
<Storyboard>
<ThicknessAnimation />
</Storyboard>
<Storyboard>
<ThicknessAnimation />
</Storyboard>
</vsupport:CBUserControlBase.Resources>
<Grid Margin="1" IsEnabled="{Binding Path=IsBusy, Converter={StaticResource BoolInverse}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<local:FirmSelectorView Grid.Row="0" Margin="1,1,1,1"/>
<Grid Grid.Row="1" ClipToBounds="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="1,0,0,0">
<!-- Unrelated Content -->
</Grid>
<Grid Grid.Column="1" Margin="1,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="White">
<!-- Unrelated Content -->
</Grid>
<Grid Grid.Row="1" Margin="0,1,0,0">
<!-- Unrelated Content -->
</Grid>
<Grid Grid.Row="2" Margin="0,1,0,0">
<!-- Unrelated Content -->
</Grid>
<Grid Grid.Row="3" Margin="0,1,0,0">
<!-- Unrelated Content -->
</Grid>
<!-- Notes and Related Entities -->
<Grid Grid.Row="4" Margin="0,1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<!-- Unrelated Content -->
</Grid>
<!-- Related Entities -->
<Grid Grid.Column="1" Margin="1,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Background="{StaticResource brush_Logo}" Foreground="White" Padding="5,0,0,0" Height="24"
HorizontalContentAlignment="Left" VerticalContentAlignment="Center"
Content="Related Entities" />
<!-- This one expands when multiple content items are longer than vertical space. -->
<!-- Scroll viewer used to be inside ItemsControl. Tried moving it to see if that helped. -->
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden">
<ItemsControl ItemsSource="{Binding Path=RelatedEntities}" x:Name="RelatedEntitiesItemsControl">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type models:C}">
<Grid Margin="2,2,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" CornerRadius="5,0,0,5" Padding="0,2,0,2">
<TextBlock Foreground="White" FontSize="10" Background="Transparent">
</TextBlock>
</Border>
<Border Grid.Column="1" Background="#FFF5F7FF" CornerRadius="0,5,5,0" Margin="3,0,0,0">
<Grid>
</Grid>
</Border>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type models:P}">
<Grid Margin="2,2,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" CornerRadius="5,0,0,5" Padding="0,2,0,2" Background="{StaticResource brush_Plan}">
<TextBlock Foreground="White" FontSize="10" Background="Transparent">
</TextBlock>
</Border>
<Border Grid.Column="1" Background="#FFF5F7FF" CornerRadius="0,5,5,0" Margin="3,0,0,0">
<Grid>
</Grid>
</Border>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type models:A}">
<Grid Margin="2,2,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" CornerRadius="5,0,0,5" Padding="0,2,0,2" Background="{StaticResource brush_Account}">
<TextBlock Foreground="White" FontSize="10" Background="Transparent">
</TextBlock>
</Border>
<Border Grid.Column="1" Background="#FFF5F7FF" CornerRadius="0,5,5,0" Margin="3,0,0,0">
<Grid>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<!-- Old ScrollViewer Location -->
<ItemsPresenter />
<!-- Old ScrollViewer Location -->
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Grid>
<ContentControl Grid.Row="1">
</ContentControl>
<Grid Grid.Row="2" Margin="0,1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
</Grid>
<Grid Grid.Column="1" Margin="1,0,0,0">
</Grid>
<!-- This one works properly -->
<Grid Grid.Column="2" Margin="1,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
</Grid>
<ItemsControl Grid.Row="1" AlternationCount="2" ItemsSource="{Binding Path=Stuff}">
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label />
<Label />
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="WhiteSmoke" TargetName="StaticTextLabel" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="{StaticResource brush_LogoLight}" TargetName="StaticTextLabel" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Grid>
<Grid Grid.Row="3" Margin="0,1,0,0">
</Grid>
</Grid>
</Grid>
</Grid>
</vsupport:CBUserControlBase>
Just a tip....you'll have a bit better luck getting answers in future by providing a proper MCVE. In this particular case your issue can be boiled down to this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden">
<ItemsControl>
<ItemsControl.ItemsSource>
<x:Array Type="{x:Type sys:String}">
<sys:String>Hello World</sys:String>
<sys:String>Goodbye World</sys:String>
<sys:String>Hello World</sys:String>
<sys:String>Goodbye World</sys:String>
<!-- ... etc ... -->
<sys:String>Hello World</sys:String>
<sys:String>Goodbye World</sys:String>
</x:Array>
</ItemsControl.ItemsSource>
</ItemsControl>
</ScrollViewer>
</Grid>
When you do Height="Auto" in your row definition you're basically saying "give the controls on this row as much space as they need, which ScrollViewer promptly does irrespective of how much space its parent has. When you use Auto in conjunction with more than one row you're effectively telling the layout manager that you are expecting the first row to never exceed the amount of available space...otherwise, why would you declare another row beneath it?
The reason WPF layout is tricky is because it's different to most other layouts. Most things start at the top and work their way down, figuring out how much space to allocate based on how much is available. WPF starts by asking each control how much it wants, and then works it's way up. Once it gets to the top THEN it walks back down assigning actual sizes. So in your case you've got this ScrollViewer asking for more space than is actually available, but it's inside about 7 or 8 layers of nested Grid panels. At each level while walking up the tree the layout manager is looking at these saying "how should I split the available space amongst this Grid's children?", and each one of these is specifying "Auto" for the row in question, which is effectively saying "give this particular row as much as it wants, even if it's more than I have to offer".
I know this probably isn't what you want to hear but my suggestion would be to throw the whole layout out and start again. RowSpan and ColumnSpan are absolutely key in layouts like this, if you start using them then you'll find you can collapse the entire thing down to just a few nested layers, and you won't have ScrollViewer problems like the one above. If that's not an option then you're going to have to walk up the visual tree yourself changing each RowDefinition from Auto to something else that better meets your actual GUI requirements.

How do I get a TextBox to fill a resizable column?

I'm trying to get a TextBox to fill the available space in a resizable column. The TextBox is part of a user control:
<UserControl x:Class="TextBoxLayout.FieldControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Name</Label>
<TextBox Grid.Column="1"/>
</Grid>
</UserControl>
This user control is in a window with a vertical splitter:
<Window x:Class="TextBoxLayout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TextBoxLayout"
Title="Text box layout" Height="400" Width="600">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<local:FieldControl Grid.Column="0" Grid.Row="0" MaxWidth="200" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="Testing"/>
<GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="3"/>
<TextBlock Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Text="Testing"/>
</Grid>
</Window>
The problem is the TexTBox appears to be very narrow - what I'd want it to do is fill the left column and resize with the splitter. How do I do that?
Use HorizontalAlignment="Stretch" instead of "Left" for FieldControl. Remove MaxWidth if required. Use TextAlignment to align text.
Just wanted to add to more examples for future code searches.
I put this in the top of the xaml file:
<UserControl.Resources>
<Style TargetType="{x:Type TextBlock}" x:Key="CenterCell">
<Setter Property="Background" Value="{Binding Included, Converter={StaticResource BoolToColorConverter}}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="TextAlignment" Value="Center"/>
</Style>
</UserControl.Resources>
And then in the datagrid:
<DataGridTextColumn Header="Excluded" Binding="{Binding Excluded}" ElementStyle="{StaticResource CenterCell}"/>
This centers the text and sorting is still enabled. The textbox fills the cell and in this case is colored using a bool converter.
just see whether is that you want
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition MinWidth="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<local:FieldControl Grid.Column="0"
Grid.Row="0"
Margin="2"
/>
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="Testing" />
<GridSplitter Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="3" />
<TextBlock Grid.Column="2"
Grid.Row="0"
Grid.RowSpan="2"
Text="Testing" />
</Grid>

How to create a bordered table in Silverlight?

I am currently using Silverlight 3. I want to create the equivalent of a 2x2 HTML table. I want each cell to have a black border. How do I do this in Silverlight? Isn't there a property I can set on a Grid element to make each cell have a border?
Nope. Grid is simply one of a number of panel types that are designed to layout their children in specific way. Grids are used extensively in many different and often nested ways. They are lightweight and therefore do not carry loads of baggage that may or may not get used, such as in this a bunch of properties to determine borders on "cells".
To create a border on each cell simply use the Border control:
<Grid>
<Grid.Resources>
<Style x:Key="borderStyle" TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="2" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Style="{StaticResource borderStyle}" Grid.Row="0" Grid.Column="0">
<!-- Cell 0.0 content here -->
</Border>
<Border Style="{StaticResource borderStyle}" Grid.Row="0" Grid.Column="1">
<!-- Cell 0.1 content here -->
</Border>
<Border Style="{StaticResource borderStyle}" Grid.Row="1" Grid.Column="0">
<!-- Cell 1.0 content here -->
</Border>
<Border Style="{StaticResource borderStyle}" Grid.Row="1" Grid.Column="1">
<!-- Cell 1.1 content here -->
</Border>
</Grid>

WPF Style Setter * Height and Width

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>
A grid column definition / row definition define layout, and within the defined areas you should add controls which should be styled (using the attached 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="{StaticResource 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 height 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 up a few concepts for you.
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 its content, then star sizing doesn't work.

Resources