I have a button on a window that sizes to the window. I have put a grid inside the button with one row and two columns, and put a path in first column, and a textbox in the second.
My problem is I can't get the grid to stretch with the button.
Here is what is happening:
Here is what I want to happen:
I have the grids HorizontalAlignment="Stretch", yet it is not stretching. What am I doing wrong here?
Here is the code:
<Window x:Class="GridInButtonIssue.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:GridInButtonIssue"
mc:Ignorable="d"
Title="MainWindow" Height="136.5" Width="269.839">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas x:Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-298.50531" Y="-576.33075"/>
</Canvas.RenderTransform>
<Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
</Canvas>
</Canvas>
<TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
</Grid>
</Button>
</Grid>
</Window>
The Grid class in WPF represents a Grid control. The following code snippet creates a Grid control, sets its width, horizontal alignment, vertical alignment, show grid lines, and background color. Grid DynamicGrid = new Grid();
First Method: By typing XAML Code ColumnDefinitions property. By default, GridLines are invisible. For showing the GridLines, set the ShowGridLines property of the Grid to True.
The difference is the way they contain elements. Elements in Grid are stored in matrix form or you can say tabular form. You can define columndefinitions and rowdefinitions and you can access and store element at a particular row and column. But in stackpanel, elements are stored in stack format .
You can span across multiple rows and columns using the Grid. RowSpan and Grid. ColumnSpan attached properties. The default value for both these properties is 1. The Grid will attempt to assign as many row spans or column spans as it can up to the amount specified by the Grid.
You have to set the HorizontalContentAlignment
to Strech
on the Button
directly like so:
<Window x:Class="GridInButtonIssue.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:GridInButtonIssue"
mc:Ignorable="d"
Title="MainWindow" Height="136.5" Width="269.839">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="btn_SelectMode" Grid.Row="0" Margin="0,35,0,0" HorizontalContentAlignment="Stretch" >
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Canvas x:Name="svg2" Grid.Column="0" Width="25" Height="25" HorizontalAlignment="Center">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas x:Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-298.50531" Y="-576.33075"/>
</Canvas.RenderTransform>
<Ellipse xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="298.6" Canvas.Top="576.4" Width="19.9" Height="19.9" x:Name="path4144" Fill="#FF951718" StrokeThickness="0.14452878" Stroke="#FFFD0000" StrokeMiterLimit="4" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Opacity="1"/>
</Canvas>
</Canvas>
<TextBlock Grid.Column="1" Text="Test Button" HorizontalAlignment="Left" />
</Grid>
</Button>
</Grid>
</Window>
So it looks like this:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With