I'm trying to position the 2 buttons in the below xaml on each side of the StackPanel, the Help button shold be on the left and the Edit button should be on the right side.
Here's the Xaml,
<
UserControl x:Class="DashboardControls.Templates.TwoRowPane"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="Auto" Width="Auto" xmlns:igDock="http://infragistics.com/DockManager" xmlns:my="clr-namespace:Infragistics.Windows.DataPresenter;assembly=Infragistics3.Wpf.DataPresenter.v9.2" xmlns:igRibbon="http://infragistics.com/Ribbon">
<Grid Height="200" Name="grid1" Width="200" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Height="Auto" Width="Auto" Margin="0,0,0,0" Name="stackPanelTop" VerticalAlignment="Stretch" Orientation="Horizontal" Grid.RowSpan="1">
</StackPanel>
<StackPanel Grid.Row="1" Height="Auto" Width="Auto" Margin="0,0,0,0" Name="stackPanelBottom" VerticalAlignment="Stretch" Orientation="Horizontal" Grid.RowSpan="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
<igRibbon:ButtonTool Height="Auto" Name="buttonTool2" Width="Auto" Content="Test" Margin="5,5,5,5" HorizontalContentAlignment="Center" HorizontalAlignment="Center" Grid.Column="0" Caption="" igRibbon:RibbonGroup.MaximumSize="ImageOnly" SmallImage="/DashboardControls;component/Resources/Images/help.ico" />
<igRibbon:ButtonTool Height="Auto" Name="buttonTool1" Width="40" Content="Edit" Margin="5,5,5,5" HorizontalContentAlignment="Center" HorizontalAlignment="Right" Grid.Column="1" BorderThickness="5" BorderBrush="Blue" />
</Grid>
</Grid> </
</
UserControl>
The behavior you are seeing has no relation to the elements within the Grid as you get the same behavior whether you use a ButtonTool or a Button or other element. The stackPanelBottom that contains the Grid with the 2 buttons have a Orientation of Horizontal. That means that the StackPanel will measure its children (the grid containing the buttons in this case) with a Width of Infinity and use whatever its DesiredSize.Width is as the Width for which it will arrange that element. If you want the Grid panel to fully occupy the width of the containing StackPanel then you might try setting its Orientation to Vertical in which case the Height will be measured with Infinity instead. Of course that will mean that the panel will not occupy (or could exceed) the explicit height you have for that RowDefinition (you have it set to 40).
However you will notice that that will not work the way your sample is set up. That is because you have 2 column definitions - one where the Width is 1* and the other where the Width is 100* so the grid panel would try to make the right most element 100 pixels width for every pixel it makes the left column. Since the UserControl is only 200 pixels wide it will arrange the left element with 2 pixels. Since you have set 5 pixels of margin on the left and right, the button itself is 0 pixels wide.
If you are looking to have both columns be the same width and have the grid size to the 40 pixels of height in the outer grid then you might remove the containing stack panel and remove the 100 from the * width. e.g.
<Grid Height="200" Name="grid1" Width="200" Margin="0"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="40"/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Name="stackPanelTop" VerticalAlignment="Stretch" Orientation="Horizontal" Grid.RowSpan="1"> </StackPanel> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <igRibbon:ButtonTool Name="buttonTool2" Content="Test" Margin="5" HorizontalAlignment="Left" Grid.Column="0" /> <igRibbon:ButtonTool Name="buttonTool1" Content="Edit" Margin="5" HorizontalAlignment="Right" Grid.Column="1" BorderThickness="5" BorderBrush="Blue" /> </Grid> </Grid>