How to stretch the GRID in WPF

Question

2.00/5 (1 vote)

See more:

I am having a grid and some controls inside it i have inserted a link to view the screen

http://i.imgur.com/y2BKKVP.jpg[^]

HTML

		<Page
    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/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/composite-font"
    x:Class="FlukeDataDog.Preferences"
     HorizontalAlignment="Stretch" Margin="1,0,0,0" 
    VerticalAlignment="Top" Width="Auto" Height="Auto" x:Name="pgePreferences" KeyDown="pgePreferences_KeyDown" Focusable="False">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="..\Resources\FlukeBasicTheme.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
        <GroupBox x:Name="grpLanguage" Height="300" Margin="2,0,2,2" Focusable="False" >
        <Grid x:Name="grdMain" Width="Auto" Height="Auto" Margin="0,0,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="550"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="210"/>
                <RowDefinition Height="10"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
			<Button Margin="0,0,0,0" x:Name="btnApply" Content="Apply"  HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Height="23" Visibility="Hidden" />
        	<Border d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" CornerRadius="15,15,15,15" Focusable="False" x:Name="bdLanguage" removed="#FFA89A6E" BorderBrush="#FF8E8B82" Margin="0,0,-151,0" >
        		<Grid Width="Auto" Height="Auto" VerticalAlignment="Stretch">
        			<Grid.ColumnDefinitions>
        				<ColumnDefinition Width="0.359*"/>
        				<ColumnDefinition Width="0.28*"/>
        				<ColumnDefinition Width="0.361*"/>
        			</Grid.ColumnDefinitions>
        			<Grid.RowDefinitions>
        				<RowDefinition Height="0"/>
        				<RowDefinition Height="11"/>
        				<RowDefinition Height="44"/>
        				<RowDefinition Height="54.5"/>
        				<RowDefinition Height="50"/>
        				<RowDefinition Height="40.5"/>
        				<RowDefinition Height="20"/>
        			</Grid.RowDefinitions>
        			<Label x:Name="lblCurrentLanguage" Height="23" Focusable="False" Content="" Width="Auto" Visibility="Hidden" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.RowSpan="2"/>
        			<Label x:Name="lblCurrentLanguageDisplay" Height="23" Focusable="False" Visibility="Hidden" HorizontalAlignment="Left" Margin="60,0,0,0" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1" Grid.RowSpan="2"/>
        			<Label x:Name="lblSelectLanguage" Content="" Width="Auto" Focusable="False"  Height="23" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0,0,0" Grid.Row="2" />
        			<ComboBox ItemsSource="{Binding}" x:Name="cmbSelectLanguage" IsSynchronizedWithCurrentItem="True" SelectionChanged="cmbSelectLanguage_SelectionChanged" Height="25" HorizontalAlignment="Stretch" MinHeight="0" MinWidth="0" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="1" Margin="3,0,3,0" Width="175" />
        			<Label x:Name="lblSelectDateFormat" Focusable="False" HorizontalAlignment="Left" Margin="15,0,0,0" VerticalAlignment="Center" Grid.Row="3" Grid.RowSpan="1"/>
        			<ComboBox x:Name="cmbDateFormat" SelectionChanged="cmbDateFormat_SelectionChanged" Height="25" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="1" VerticalAlignment="Center" Margin="3,0,3,0" Width="175" />
        			<Label x:Name="lblSelectTimeFormat" Focusable="False" Height="23" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="4" Margin="15,0,0,0"/>
        			<ComboBox x:Name="cmbTimeFormat" SelectionChanged="cmbTimeFormat_SelectionChanged" Height="25" Margin="3,7.5,3,12.5" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="1" Width="175" />
                    <ComboBox RenderTransformOrigin="0.5,0.5" x:Name="cmbUnits" VerticalAlignment="Center" Height="25" Grid.Column="1" Grid.Row="5" IsSynchronizedWithCurrentItem="True" SelectionChanged="cmbUnits_SelectionChanged" Grid.ColumnSpan="1" Margin="3,0,3,0" Width="175" /> 
                    <Label HorizontalAlignment="Left" Focusable="False" Margin="15,0,0,0" x:Name="lblSelectUnit" VerticalAlignment="Center" Height="23" VerticalContentAlignment="Center" Content="" Grid.Row="5"/>
        			<ComboBox HorizontalAlignment="Stretch" x:Name="cmbSelectSubUnits" Grid.Row="5" IsSynchronizedWithCurrentItem="True" Grid.Column="2" Grid.RowSpan="1" Grid.ColumnSpan="1" SelectionChanged="cmbSubUnits_SelectionChanged" Margin="9.5,0,68.5,0" Height="25" VerticalAlignment="Center" Width="175" />
        			<Label HorizontalAlignment="Left" x:Name="lblSelectSubUnit" Focusable="False" VerticalAlignment="Center" Content="" Grid.Row="5" VerticalContentAlignment="Center" Margin="15,0,0,0" Grid.RowSpan="1" Visibility="Hidden"/>
                     <ComboBox RenderTransformOrigin="0.5,0.5" x:Name="cmbOVUnits" VerticalAlignment="Center" Height="25" Grid.Column="1" Grid.Row="6" IsSynchronizedWithCurrentItem="True"  Grid.ColumnSpan="1" Margin="3,0,3,0" Width="175" /> 
                    <Label x:Name="lblOVUnit" Content="Select OV Unit" Width="Auto" Focusable="False" Height="23" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0,0,0" Grid.Row="7" />
        	                    
                </Grid>
        	</Border>
        	
            <Border d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" CornerRadius="15,15,15,15" Focusable="False" x:Name="bdAutoStart" removed="#FFA89A6E" BorderBrush="#FF8E8B82" Margin="0,0,-151,0" Grid.Row="3" >
                <CheckBox HorizontalAlignment="Left" Focusable="False" Margin="15,0,0,0" VerticalAlignment="Center" Height="23" VerticalContentAlignment="Center" Content="" x:Name="chkAutoShow"   Checked="chkAutoDisplay_Checked" Unchecked="chkAutoDisplay_Unchecked" />
            </Border>
        </Grid>
    </GroupBox>  
     
</Page>

But when i add a new label it is not stretching i am unable to see the label and combobox fully.

Posted 3-Sep-14 3:55am

chandra sekhar

Updated 4-Sep-14 1:24am

v5

Add a Solution

Comments

Sergey Alexandrovich Kryukov 3-Sep-14 12:25pm

You repeat the same mistake over and over: the behavior is defined by the whole XAML, starting from the window element, and you are not showing it.

You re-post this question probably because your previous question was removed due to some abuse reports. I don't think it was real abuse, but the problem is that you refused to proved more comprehensive information. Did you ignore my answer? Or you did not even see it?

—SA

chandra sekhar 4-Sep-14 6:34am

I have updated the question

Sergey Alexandrovich Kryukov 4-Sep-14 10:20am

Thank you. No wonder you get some more answers now. :-)
—SA

3 solutions

Solution 1

Please see my comment to the question.

This is the key:
http://msdn.microsoft.com/en-us/library/system.windows.window.sizetocontent(v=vs.110).aspx[^],
http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.horizontalalignment(v=vs.110).aspx[^],
http://msdn.microsoft.com/en-us/library/system.windows.controls.control.horizontalcontentalignment(v=vs.110).aspx[^].

You need to understand this:
http://msdn.microsoft.com/en-us/library/ms745058%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/ms748828%28v=vs.110%29.aspx[^].

I will be able to answer in a way more specific to your case if you provide more adequate code sample which would allow to see the problem immediately through Visual Studio. One (highly simplified, please!) complete self-contained XAML sample will do.

—SA

Posted 3-Sep-14 6:31am

Sergey Alexandrovich Kryukov

Updated 3-Sep-14 6:33am

v2

Comments

Abhinav S 3-Sep-14 12:55pm

5!

Sergey Alexandrovich Kryukov 3-Sep-14 13:22pm

Thank you, Abhinav.
—SA

Solution 2

I might be wrong, but there are some glaring things in your XAML that jump out as being highly contradictory with what you are trying to achieve.

Let's start with this:

<ColumnDefinition Width="0.28*"/>

Now, I might be incorrect but my understanding is that * represents an equal portion of the available width. So in this case you are telling your column to be 28% of 1/3rd (you declare 3 columns) of the width of your grid.

Now, when it comes to your combo box (I've stripped out some of your attributes to simplify what I'm explaining.

<ComboBox Width="175" />

You are declaring it with a fixed width of 175.

Now let me ask you this... what happens if your grid column's size is only 150 and you have fixed the width of your combobox to take up all of that space? Well, the combo box will get cut off.

Now, looking at your labels.
I think all of them need to have "Grid.ColumnSpan=3" added to them as at the moment you are limiting their space to just the first column, yet they could have long text and as a result will be cut off by the limited size.

Posted 4-Sep-14 0:44am

Pheonyx

Comments

Sergey Alexandrovich Kryukov 4-Sep-14 10:18am

Good points, a 5.
As I say, most of the issues depends on the top element (window, I presume), on which size automatically defines which.
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pheonyx · Accepted Answer · 2014-09-04T01:46:00

Oh, in addition to my other solution.

You have now added a picture which makes another issue plain as day.

XML

<Grid.RowDefinitions>
<RowDefinition Height="0"/>
<RowDefinition Height="11"/>
<RowDefinition Height="44"/>
<RowDefinition Height="54.5"/>
<RowDefinition Height="50"/>
<RowDefinition Height="40.5"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>

The sum of their total height is 220.
This I believe is the row the above grid sits in.

<RowDefinition Height="210"/>

It has a height of 210. Try increasing this to 220 or I would probably go for 230 to see how it looks.

That might help your issue.

How to stretch the GRID in WPF

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us