Is there any way to change the style of gridlines in wpf grid?
I need to divide grid into 4 cells. To do it I used RowDefinitions and ColumnDefinitions. However I need user to distinguish which cell is which, that's why I need to change the color of the gridlines.
It depends on the look you are going for. In WPF, there are different ways to do almost anything. Here are a couple of the easier ones.
The easiest way is to set ShowGridlines="True":
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="5"
ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="(0,0)" />
<TextBlock Grid.Column="1"
Grid.Row="0"
Text="(1,0)" />
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="(0,1)" />
<TextBlock Grid.Column="1"
Grid.Row="1"
Text="(1,0)" />
</Grid>
That gives you grid something like:
You can also use a Rectangle in each cell of the grid to get different effects. Here, the Fill is transparent and the Stroke is Blue:
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0"
Grid.Row="0"
Stroke="Blue"
Fill="Transparent" />
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="(0,0)" />
<Rectangle Grid.Column="1"
Grid.Row="0"
Stroke="Blue"
Fill="Transparent" />
<TextBlock Grid.Column="1"
Grid.Row="0"
Text="(1,0)" />
<Rectangle Grid.Column="0"
Grid.Row="1"
Stroke="Blue"
Fill="Transparent" />
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="(0,1)" />
<Rectangle Grid.Column="1"
Grid.Row="1"
Stroke="Blue"
Fill="Transparent" />
<TextBlock Grid.Column="1"
Grid.Row="1"
Text="(1,0)" />
</Grid>
That produces this:
Alternatively, you can fill the Rectangles and not give them a Stroke:
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0"
Grid.Row="0"
Fill="LightBlue" />
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="(0,0)" />
<Rectangle Grid.Column="1"
Grid.Row="0"
Fill="LightYellow" />
<TextBlock Grid.Column="1"
Grid.Row="0"
Text="(1,0)" />
<Rectangle Grid.Column="0"
Grid.Row="1"
Fill="LightYellow" />
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="(0,1)" />
<Rectangle Grid.Column="1"
Grid.Row="1"
Fill="LightBlue" />
<TextBlock Grid.Column="1"
Grid.Row="1"
Text="(1,0)" />
</Grid>
That can, for instance, give a checkerboard pattern:
This is by no means a comprehensive answer - you could probably fill a book. It was just meant to show that there are many ways to do what you are asking, and that there are some pretty quick and easy solutions if that's all you need.
Related
I'm trying to create an asymmetrical layout using a Grid where i have 2 rows, 2 columns and an extra shared column as follows:
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle
Grid.Row="0"
Grid.Column="0"
Width="200"
Height="200"
Fill="Red" />
<Rectangle
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="250"
Height="200"
Fill="Blue" />
<Rectangle
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Width="250"
Height="200"
Fill="Yellow" />
<Rectangle
Grid.Row="1"
Grid.Column="2"
Width="200"
Height="200"
Fill="Green" />
</Grid>
But however i try to set it up, the second column always collapses unless i explicitly set a fixed width (in this case 50px). Why is this happening?
Shouldn't the second column resize itself to the remainder of each rectangle?
Using a Converter i managed to manually calculate the shared column size by placing the content of the first column in a container and binding the width of the shared column to the ActualWidth of that container subtracted by the first column width.
e.g.
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="{Binding ElementName=Rect3, Path=ActualWidth, Converter={StaticResource SharedColumnConverter}, ConverterParameter=200}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle
Grid.Row="0"
Grid.Column="0"
Width="200"
Height="200"
Fill="Red" />
<Rectangle
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="250"
Height="200"
Fill="Blue" />
<Rectangle
Name="Rect3"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Width="250"
Height="200"
Fill="Yellow" />
<Rectangle
Grid.Row="1"
Grid.Column="2"
Width="200"
Height="200"
Fill="Green" />
</Grid>
I have some issues with getting the grid splitter to work properly.
I have placed the GridSplitter between two grids but the problem is that the grid splitter attaches to left grid which is the only one I can move with the splitter. If I move the left grid towards the right grid, the right grid will get smaller but if I move it away from the right grid it will not expand more than its initial size.
How can I place the GridSplitter in such a way that it allows me to adjust the width of the right grid and then reducing the width of the left grid if it is dragged that way.
I did add a SharedSizeGroup to one of the child grids of the right grid but I'm not sure if that is relevant to my problem, removing it didn't solve anything.
I have also tried to play around with the ResizeBehavor of the GridSplitter also without luck.
I hope it makes sense.
XAML:
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0" Grid.Column="0" VerticalContentAlignment="Center" Margin="5"/>
<ComboBox Grid.Row="0" Grid.Column="1" MinWidth="200px"/>
<Label Grid.Column="2" VerticalContentAlignment="Center" Margin="10 5 5 5"/>
<ComboBox Grid.Row="0" Grid.Column="3" IsEditable="True" MinWidth="250px"/>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Grid.Column="0">
<TextBlock/>
</Grid>
<!-- The "Left" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="0">
<WebBrowser></WebBrowser>
</Grid>
<GridSplitter HorizontalAlignment="Stretch" ResizeDirection="Columns" Width="10" Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>
<!-- The "Right" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Panel.ZIndex="2" MinWidth="200" HorizontalAlignment="Right">
<Border BorderBrush="Blue" BorderThickness="1" MinWidth="200" Background="#4C808080" >
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True" />
<Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="1" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True"/>
<ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center" IsReadOnly="True"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
</Grid>
Have a look at this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0"
Grid.Column="0"
VerticalContentAlignment="Center"
Margin="5" />
<ComboBox Grid.Row="0"
Grid.Column="1"
MinWidth="200px" />
<Label Grid.Column="2"
VerticalContentAlignment="Center"
Margin="10 5 5 5" />
<ComboBox Grid.Row="0"
Grid.Column="3"
IsEditable="True"
MinWidth="250px" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
<Grid Grid.Column="0"
Background="Aqua">
</Grid>
<GridSplitter HorizontalAlignment="Stretch"
ResizeDirection="Columns"
Width="10"
Grid.Column="1"
ResizeBehavior="PreviousAndNext" />
<!-- The "Right" Grid -->
<Grid Grid.Column="2"
Panel.ZIndex="2"
MinWidth="200"
Background="Yellow">
<Border BorderBrush="Blue"
BorderThickness="1"
MinWidth="200"
Background="#4C808080">
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="5" />
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<Label Grid.Column="0"
Grid.Row="1"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="1"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<ItemsControl Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
IsReadOnly="True" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="2">
<TextBlock />
</Grid>
</Grid>
I changed the Grid "logic" a bit. As I understand you correct you want the GridSplitter for the middle part. Thats why I put the top and bottom part in extra rows to keep them away from the GridSplitter. I had to remove the HorizontalAlignment="Right" from your right Grid, too. Otherwise it would have not changed it's size.
Just to be sure the GridSplitter is working I removed the WebBrowser and added Background colors to the left and right Grid. You can replace that. Thought maybe it would be helpfull for you to see if it's working like expected.
/edit added width relation
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
This means when you start the application the first column will take twice the size then the third.
This should be a decent showcase, it's exactly the same for columns, just sideways.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300"/> //sets the height of the first row
<RowDefinition Height="*"/> //* sets the remainder of the height, doesn't work like auto!
</Grid.RowDefinitions>
<Grid Grid.Row="0"
HorizontalAlignment="Left"
Width="400"
Background="Green" />
<Grid Grid.Row="0"
Margin="400,0,0,0"
Background="Red"/>
<Grid Grid.Row="1"
Background="Blue"/>
<GridSplitter Grid.Row="0"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Height="2.5"
Background="Black" />
</Grid>
I tried to implement a GridSplitter to my WPF Window - like shown here http://www.wpf-tutorial.com/panels/gridsplitter/
Worked just well. But I wanna do a double grid splitter. So the window should be splitted in a left and a right part. And the right part should be splitted in a top and a button part.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid></Grid>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">One</TextBlock>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
<TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Two</TextBlock>
</Grid>
</Grid>
Buuut it alawys splits up the left part in two pieces. I tried like everything setting the Grid.Row and Grid.column for everything explicit - but nothing. What am I missing?
To achieve what you would like:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left</TextBlock>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
<TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
</Grid>
You didn't set Grid.Column="2" on the the second Grid you intended to be on the right.
I also changed the Width and Height properties to * so the horizontal and vertical GridSplitters will sit in the center.
The problem is the image is not fixed to the right side of the screen, so when I resize the screen it the image goes off screen, e.g.:
In that example we should see an image of a full phone.
I have the following Grid layout defined:
<Grid Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="23" />
<ColumnDefinition Width="166" />
<ColumnDefinition Width="473" />
<ColumnDefinition Width="330" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="35" />
<RowDefinition Height="35" />
<RowDefinition Height="35" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- some irrelevant stuff removed -->
<Canvas Grid.Column="3" HorizontalAlignment="Right" >
<Image HorizontalAlignment="Left" Name="imgLogo" Stretch="Uniform" VerticalAlignment="Center" Width="45" Height="45" Margin="30,135,0,0" Canvas.ZIndex="99" Canvas.Left="0" Canvas.Top="-7" />
<Image Source="/Resources/Images/MobileBrandingSample.png" Height="634" Width="316" HorizontalAlignment="Left" Margin="0,14,0,0" Name="imgPhone" Stretch="Uniform" VerticalAlignment="Top" />
<Label Canvas.Left="80" Canvas.Top="127" Content="" Height="20" Name="lblCompanyName" Width="169" FontSize="15" Padding="0,0,0,0" />
<Label Canvas.Left="80" Canvas.Top="150" Height="20" Name="lblPhoneNumber" Width="160" FontSize="12" Padding="0,0,0,0">
<TextBlock Name="tbPhoneNumberLabel" Text="" TextDecorations="Underline" Foreground="#35B6E5" Width="160"></TextBlock>
</Label>
</Canvas>
</Grid>
With this, imgPhone is right aligned, but when I resize the window imgPhone goes off screen. What do I need to keep imgPhone docked to the right of the screen, regardless of how the window is resized?
Ditch the Canvas, use a Dockpanel with a Grid inside it, dock the whole lot right and absolute sizing in the grid will keep things where you want them relative to everything else.
I tried this....and got a solution...maybe not exactly what you want but I think you can work out the few adjustments needed.
<Grid Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="company name"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Phone number"></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Logo name"></TextBlock>
<Button Grid.Row="3" Grid.Column="0" Content="Upgrade branding"></Button>
<TextBox Grid.Row="0" Grid.Column="1"></TextBox>
<TextBox Grid.Row="1" Grid.Column="1"></TextBox>
<Button Grid.Row="2" Grid.Column="1" Content="Load logo"></Button>
<Image Grid.Column="2" Grid.RowSpan="4" HorizontalAlignment="Right" Source="C:\Users\somonteiro\Desktop\Montagens\somonteiro.jpg"></Image>
</Grid>
I have to draw something like a calendar.
I have a table where at top we see days and at left we see drivers' names.
And in a cell we see how many hours he works.
How to draw this table?
Also I need ability right clicking open driver's card.
How to do this also?
Thanks in advance!
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Text="Mon" />
<TextBlock Grid.Row="0" Grid.Column="2" Text="Tue" />
<TextBlock Grid.Row="0" Grid.Column="3" Text="Wen" />
<TextBlock Grid.Row="0" Grid.Column="4" Text="Thu" />
<TextBlock Grid.Row="0" Grid.Column="5" Text="Fri" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Driver X" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Driver Y" />
<TextBlock Grid.Row="3" Grid.Column="0" Text="Driver Z" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=DriverX.MonHours}" />
Check Micheal Snow's blog for the right clicking at http://www.michaelsnow.com/2010/04/23/silverlight-tip-of-the-day-3-mouse-right-clicks/