Expanders in distinct columns in one row. Expand to the full row - wpf

I have two expanders in one grid row but in distinct columns. How can I expand each of it to the full row but not on column only.
<Grid x:Name="mainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="40" />
<RowDefinition MinHeight="40" />
</Grid.RowDefinitions>
<Controls:Expander Grid.Row="0" Grid.Column="0" x:Name="expander2" Header="Header1"
MinHeight="33" Padding="3">
<TextBlock Text="SomeText1" />
</Controls:Expander>
<Controls:Expander Grid.Row="0" Grid.Column="1" x:Name="expander1" Header="Header2"
MinHeight="33" Padding="3">
<TextBlock Text="SomeText2" />
</Controls:Expander>
</Grid>
expander1 and expander2 should expand to the whole row 0.

Introduce the triggers for Expanders that check their IsExpanded property and set their Grid.RowSpan as 2.
<Style TargetType="{x:Type Expander}">
<Style.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Grid.RowSpan" Value="2" />
</Trigger>
</Style.Triggers>
</Style>
For silverlight
<Style TargetType="{x:Type Expander}">
<Setter Property="Grid.RowSpan"
Value="{Binding IsExpanded,
RelativeSource={RelativeSource
Self},
Converter={StaticResource
local:ExpansionToRowSpanConverter}}"
</Style>
Code behind ... (this is just for illustration)
ExpansionToRowSpanConverter.Convert(....)
{
return (bool)value ? 2 : 1;
}
Does this work for you?

Related

How to modify AvalonDock NavigatorWindow

I am using AvalonDock as the docking manager for my application. I noticed that it has a Ctrl + Tab window (the NavigatorWindow) but that seems to have some odd hard-coded classifications. I switched my last LayoutAnchorable to a LayoutDocument, so at least I don't have things in different groups now, but I really don't need "Active Tool Windows" and "Active Files" doesn't make sense in my context.
Is there any way to customize this component? I'd ideally just like to hide the left list, and change the tile of the right list to something more generic like "Active Windows".
There is a style that you can override (see below). The NavigatorWindow itself has no dependency properties that you could use to configure it so I don't think you can do more than restyling - but maybe thats all you need :-)
xmlns:avalonDockControls="clr-namespace:Xceed.Wpf.AvalonDock.Controls"
<Style x:Key="{x:Type avalonDockControls:NavigatorWindow}"
TargetType="{x:Type avalonDockControls:NavigatorWindow}">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="SizeToContent"
Value="WidthAndHeight" />
<Setter Property="ResizeMode"
Value="NoResize" />
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome ResizeBorderThickness="10"
CaptionHeight="16"
CornerRadius="3,3,3,3"
GlassFrameThickness="4" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type avalonDockControls:NavigatorWindow}">
<Grid>
<Border x:Name="WindowBorder"
BorderThickness="3"
Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition MinHeight="54" />
<RowDefinition Height="*" />
<RowDefinition MinHeight="42" />
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding SelectedDocument.LayoutElement.IconSource, Converter={StaticResource NullToDoNothingConverter}}"
Stretch="None">
</Image>
<TextBlock x:Name="selectedElementTitle"
Text="{Binding SelectedDocument.LayoutElement.Title}"
TextTrimming="CharacterEllipsis"
Grid.Column="1"
VerticalAlignment="Center"
FontWeight="Bold"
Margin="4,0,0,0">
</TextBlock>
</Grid>
<TextBlock x:Name="selectedElementDescription"
Text="{Binding SelectedDocument.LayoutElement.Description}"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center">
</TextBlock>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Active Tool Windows"
FontWeight="Bold"
Margin="0,3,0,4">
</TextBlock>
<ListBox x:Name="PART_AnchorableListBox"
Grid.Row="1"
ItemsSource="{Binding Anchorables}"
SelectedItem="{Binding SelectedAnchorable, Mode=TwoWay}"
Background="Transparent"
BorderThickness="0"
MaxHeight="400"
FocusVisualStyle="{x:Null}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Cursor"
Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding LayoutElement.IconSource, Converter={StaticResource NullToDoNothingConverter}}"
Stretch="None">
</Image>
<TextBlock Text="{Binding LayoutElement.Title}"
TextTrimming="CharacterEllipsis"
Grid.Column="1"
Margin="4,2,0,2">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<Grid Grid.Column="1"
Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Active Files"
FontWeight="Bold"
Margin="0,3,0,4">
</TextBlock>
<ListBox x:Name="PART_DocumentListBox"
Grid.Row="1"
ItemsSource="{Binding Documents}"
SelectedItem="{Binding SelectedDocument, Mode=TwoWay}"
Background="Transparent"
BorderThickness="0"
MaxHeight="400"
FocusVisualStyle="{x:Null}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Cursor"
Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding LayoutElement.IconSource, Converter={StaticResource NullToDoNothingConverter}}"
Stretch="None">
</Image>
<TextBlock Text="{Binding LayoutElement.Title}"
TextTrimming="CharacterEllipsis"
Grid.Column="1"
Margin="4,2,0,2">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Grid>
<Grid Grid.Row="2">
<TextBlock Text="{Binding SelectedDocument.LayoutElement.ToolTip}"
VerticalAlignment="Center">
</TextBlock>
</Grid>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SelectedDocument"
Value="{x:Null}">
<Setter Property="Text"
Value="{Binding SelectedAnchorable.LayoutElement.Title}"
TargetName="selectedElementTitle" />
<Setter Property="Text"
Value="{x:Null}"
TargetName="selectedElementDescription" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

Format the HierachicalDatatemplate for a TreeView

I am trying to make a TreeView in XAML and it works well.
1) I have a Class containing a Name and a list of Children
<TreeView x:Name="TreeViewOffset" ItemsSource="{Binding OffsetsCollection}" VM:TreeViewHelper.SelectedItem="{Binding MyCollection, Mode=TwoWay}" Margin="19,32,59,33" AutomationProperties.IsColumnHeader="True">
<TreeViewContainer>Some Properties</TreeViewContainer>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type VM:ParentViewModel}" ItemsSource="{Binding Children}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Reference"
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Ref"/>
<RowDefinition SharedSizeGroup="Value"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="{Binding MyName}" Margin="10, 10, 10,10 "/>
</Grid>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type VM:ChildrenViewModel}">
<Grid >
<Grid.ColumnDefinitions>
<!--Placeholders for two columns of ToggleButton-->
<ColumnDefinition SharedSizeGroup="RefName"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="Name"/>
<RowDefinition SharedSizeGroup="Value"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding ChildrenValue}" Grid.Column="1" Margin="25, 0,0, 0" />
</Grid>
</DataTemplate>
</TreeView.Resources>
2) I want to improve the display by adding an another textbox (who is contained in the ParentViewModel) but this time at the end of the childrens
It Should be exactly like :
Parent : Name
Children1 Value
Children2 Value
Children3 Value
Children4 Value
Value
And this is the problem, how to improve the XAML to show the value?
I have tried to insert under
<TextBlock Grid.Column="0" Text="{Binding MyName}" Margin="10, 10, 10,10 "/>
this
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Value}" Margin="10, 10, 10,10 "/>
but it doesnt work. It is all a question about formatting but I'am not expert enough. Could you help me?
What you need to set is the ItemContainerStyle for the TreeView
A good starting point would be something like this
<Style x:Key="myTreeViewItemContainerStyle" TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="14" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ToggleButton
x:Name="Expander"
Grid.Row="0"
Grid.Column="0"
ClickMode="Press"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource myExpandCollapseToggleStyle}" />
<Border
x:Name="PART_Border"
Grid.Row="0"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter
x:Name="PART_Header"
Margin="0,2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentSource="Header" />
</Border>
<ItemsPresenter
x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
</Trigger>
<!-- Use the same colors for a selected item, whether the TreeView is focussed or not -->
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which you can apply to the TreeView by setting its style
<Style TargetType="{x:Type TreeView}">
<Setter Property="ItemContainerStyle" Value="{StaticResource myTreeViewItemContainerStyle}" />
</Style>
For your requirement, you need to add another control after the ItemsPresenter, which you then bind to the property you want to display.

Accessing XAML (WPF) elements in F#

I'm trying to create a reactive application in F# using WPF and I have encountered some problems with accessing XAML elements from the code.
In the XAML-file I have created a grid containing 16 columns and rows each:
<StackPanel Name="cellStackPanel">
<Grid Name="cellGrid" Height="500" Width="500" Margin="10,10,10,10" Background="#CCCCCC">
<Grid.Resources>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="border" Background="#FFFFFFFF" Margin="1,1,1,1">
<ContentPresenter x:Name="contentPresenter"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" TargetName="border" Value="Black"/>
</Trigger>
<Trigger Property="Control.IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="#CCCCCC"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
</StackPanel>
In F#, I traverse through the grid and programatically initialize every cell into ToggleButtons:
let initCell (x,y) (grid : Grid) =
let cell = ToggleButton()
Grid.SetColumn(cell, x)
Grid.SetRow(cell, y)
ignore (grid.Children.Add(cell))
Now I want to create an observable (to wait for in a recursive asynchronous loop) for clicking any of my ToggleButtons. I can access the grid element itself within the code but my problem is that I don't know how to access its child elements that I've created programatically. I was thinking of a, perhaps rudimentary, solution which is to catch the click event from the entire grid, and at the same time get the mouse coordinates to calculate which cell was clicked. But that is probably not a good way to do this.
I hope my question is understandable, otherwise, let me know.
As I said in the comment easier to use FsXAML + FSharp.ViewModule.
I don't quite understand what you want to, so a simple example:
<Grid>
<ListBox
ItemsSource="{Binding Cells}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="{Binding N}" Columns="{Binding N}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding Text}"
IsChecked="{Binding IsChecked}"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}},
Path=DataContext.ClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Self},Path=DataContext}"
>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="border" Background="Wheat" Margin="0">
<ContentPresenter x:Name="contentPresenter"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" TargetName="border" Value="DarkGreen"/>
</Trigger>
<Trigger Property="Control.IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="#CCCCCC"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding" Value="0" />
<Setter Property="Focusable" Value="False"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
You can use ItemsControl instead of ListBox, but configuring it will take some time =)
.fs:
type State = {mutable IsChecked:bool; Text:string}
type MainViewModel() as self =
inherit ViewModelBase()
let n = 16
let data = [1..n*n] |> List.map(fun i -> {IsChecked = false; Text = string i})
let click (state:obj) =
let st = (state :?> State)
MessageBox.Show(sprintf "%s %b" st.Text st.IsChecked ) |> ignore
let clickcommand = self.Factory.CommandSyncParam(click)
member __.ClickCommand = clickcommand
member __.Cells = data
member __.N = n
Thus, you can do anything with your object in the function click.
P.S. I allowed myself to change a little your ToggleButton style to the picture was more clearer.
I'm not a big fan of 3rd party solutions as an answer. If I understand your question, you are trying to access an element that was specified in your XAML. This can be easily done by converting your XAML to a string type then using:
let xamlBytes = Encoding.UTF8.GetBytes(xamlString)
let xamlStream = new MemoryStream(xamlBytes)
let xamlRoot = XamlReader.Load(xamlStream)
let rootElement = xamlRoot :?> FrameworkElement
let elementYouNeed = rootElement.FindName("nameOfElementYouNeed") :?> TypeOfElementYouNeed
Your case might be slightly different but this is the general idea.

Change TextBlock of custom Grid

<Grid Grid.IsSharedSizeScope="True" Name="treeGrid" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.Resources>
<local:LevelConverter x:Key="levelConverter" />
<HierarchicalDataTemplate ItemsSource="{Binding Items}"
DataType="{x:Type local:DirectoryRecord}">
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="rowHeaderColumn"/>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="column1"/>
<ColumnDefinition SharedSizeGroup="column2"/>
<ColumnDefinition SharedSizeGroup="column3"/>
<ColumnDefinition SharedSizeGroup="column4"/>
<ColumnDefinition SharedSizeGroup="column5"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding Name}"></TextBlock>
<Rectangle Grid.Column="1">
<Rectangle.Width>
<MultiBinding Converter="{StaticResource levelConverter}">
<Binding Path="Level"></Binding>
<Binding ElementName="treeViewItemToMeasure" Path="ActualWidth"></Binding>
</MultiBinding>
</Rectangle.Width>
</Rectangle>
<TextBlock Grid.Column="2"
Text="{Binding LastAccessed}"></TextBlock>
<TextBlock Grid.Column="3"
Text="{Binding Files.Count}"></TextBlock>
<TextBlock Grid.Column="4"
Text="{Binding Inherited}"></TextBlock>
<Grid.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="Aquamarine" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Inherited}" Value="True">
<Setter Property="Background" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</HierarchicalDataTemplate>
</Grid.Resources>
<TreeView>
<!-- My binding goes here -->
</TreeView>
</Grid>
I'm trying to change the background of the TextBlock contained within my custom Grid(TreeGrid), however this code fails with XamlParseException
'TextBlock' TargetTypes does not match type of element 'Grid'.
Instead of defining a style inside a Grid.Style section, you have to declare it as the Grid.Resource Style, with the TargetType specified, i.e.
<Grid.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="Aquamarine" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Inherited}" Value="True">
<Setter Property="Background" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>

Button not filling grid cell

I'm trying to build a simple 3x3 grid in Silverlight with a button in each grid cell. The grid definition is below. When I add button to the grid they never fill the 130x130 grid cell. I set the margin and padding to 0 on the buttons as well as setting their horizontal and vertical alignment to Stretch.
<Grid x:Name="Test" ShowGridLines="True" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="130"></RowDefinition>
<RowDefinition Height="130"></RowDefinition>
<RowDefinition Height="130"></RowDefinition>
<RowDefinition Height="130"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130"></ColumnDefinition>
<ColumnDefinition Width="130"></ColumnDefinition>
<ColumnDefinition Width="130"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Style x:Key="OperandButton" TargetType="Button">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="{StaticResource PhoneAccentColor}" />
<Setter Property="FontSize" Value="50" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
<Button Content="10" Style="{StaticResource OperandButton}" Grid.Row="0" Grid.Column="0" />
<Button Content="3" Style="{StaticResource OperandButton}" Grid.Row="0" Grid.Column="1" />
<Button Content="7" Style="{StaticResource OperandButton}" Grid.Row="0" Grid.Column="2" />
Your code should just work fine. Just try this code as it is.
<Grid x:Name="Test" ShowGridLines="True" HorizontalAlignment="Center" >
<Grid.Resources>
<Style x:Key="OperandButton" TargetType="Button">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="Blue" />
<Setter Property="FontSize" Value="50" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="130"></RowDefinition>
<RowDefinition Height="130"></RowDefinition>
<RowDefinition Height="130"></RowDefinition>
<RowDefinition Height="130"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="130"></ColumnDefinition>
<ColumnDefinition Width="130"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="10" Style="{StaticResource OperandButton}" Grid.Row="0" Grid.Column="0" />
<Button Content="3" Style="{StaticResource OperandButton}" Grid.Row="0" Grid.Column="1" />
<Button Content="7" Style="{StaticResource OperandButton}" Grid.Row="0" Grid.Column="2" />
</Grid>
Let me know if you still not getting it.
Try the following,
When you open your project in Blend. Right click the button, go to edit template, edit current. You'l find that every button has a grid and a container. Make the size of both equal then, you'l see the default border's size same as the buttons size.
The same template can be used for other buttons too.
Now try enveloping the buttons in the grid.
Looking at the template in blend solved the problem. The following property was set on the Border:
Margin="{StaticResource PhoneTouchTargetOverhang}"
Once this was set to 0, the grid was perfect. Thanks for the guidance.
Try this, it's must not specified VerticalAlignment Or HorizontalAlignment.
Margin="-10"

Resources