I have a grid in my WPF application. This grid has two columns and one row.
Now, I am trying to align the first column content to the right and second column content to the left as below:
-----------------------------------------------------
| ProgressControlSpinner|"Loading..."|
-----------------------------------------------------
Instead I obtain:
-----------------------------------------------------
|ProgressControlSpinner|"Loading..." |
-----------------------------------------------------
Note that I want second column to be auto adjusted to the text width.
Also this grid should expand to the outer grid column in which it is contained.
My grid is as below:
<Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
<TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
</Grid>
Note: This grid is contained within another outer grid.
I have solved. My problem was in the outer grid when defining the width for the column where inner grid was contained.
I had:
<Grid Grid.Column="0" Grid.Row="0" Margin="10 10 10 5" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
<TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
</Grid>
</Grid>
and the correct is:
<Grid Grid.Column="0" Grid.Row="0" Margin="10 10 10 5" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="MyGrid" Grid.Column="1" Margin="3" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<controls:ProgressControlSpinner Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Right"/>
<TextBlock Margin="3 0 0 0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Loading..." />
</Grid>
</Grid>
Related
So here's my problem, when I expand the main window the pages presenter frame seems to expand too but only horizontaly. (see photo #1) The 5 buttons on the bottom stay at the original resolution position verticaly but expand horizontaly, I've put them between stars related columns and rows. It worked well for my wlecome pages an this methos seems to work horizontaly. I'm wonderind if the problem comes from previoulsy setuped proprieties. Problem is related to fifthline but can be post problems.
Images
====================================
Original size see 2 border buttons
Expanded window
Grid setup
Expand working on homepage *Grid setup
====================================
<Border Padding="1">
<StackPanel>
<!---FirstLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="445"/>
<ColumnDefinition Width="365"/>
<ColumnDefinition Width="390"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<TextBlock Text="Prénom" Margin="30,5,165,0" Grid.Column="0" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxPrenom" Text="Jean" Margin="100,-1,5,1" Padding="0,5" FontSize="12"/>
<TextBlock Text="Nom" Margin="5,4,245,1" Grid.Column="1" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxNom" Text="Dujardins" Margin="60,-1,0,1" Grid.Column="1" Padding="0,5"/>
</Grid>
<!---SecondLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="433"/>
<ColumnDefinition Width="472"/>
<ColumnDefinition Width="275"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46"/>
</Grid.RowDefinitions>
<TextBlock Text="Ville" Margin="30,20,0,0" Grid.Column="0" FontWeight="Black"/>
<ComboBox Name="ClientPage_ComboVille" Margin="100,20,0,0" Padding="0,5" FontSize="12"/>
<CheckBox Name="ClientPage_CehckResponsable" Content="Responsable" Margin="10,25,361,0" Grid.Column="1" FontWeight="Medium"/>
</Grid>
<!---ThirdLine-->
<Grid Height="79">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="393"/>
<ColumnDefinition Width="787"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="74"/>
</Grid.RowDefinitions>
<TextBlock Text="Membre depuis:" Margin="30,50,0,0" Grid.Column="0"/>
<DatePicker Name="ClientPage_DatepickDatedebut" Text="Membre depuis:" Margin="130,50,770,0" Grid.ColumnSpan="2"/>
</Grid>
<!---FourthLine-->
<Grid Height="191">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="217"/>
<ColumnDefinition Width="373"/>
<ColumnDefinition Width="590"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="191"/>
</Grid.RowDefinitions>
<GroupBox Name="ClientPage_GroupExp" Header="Années d'expériences" Margin="14,12,6,8" Grid.Column="0">
<StackPanel Margin="0,0,-2,0">
<RadioButton Content="Moins d'un an" Margin="50,10,0,10"/>
<RadioButton Content="1 à 4 ans" Margin="50,10,0,10"/>
<RadioButton Content="5 à 9 ans" Margin="50,10,0,10"/>
<RadioButton Content="10 ans et plus" Margin="50,10,0,10"/>
</StackPanel>
</GroupBox>
<ListBox Name="ClientPage_List" Margin="26,22,144,8" Grid.Column="1"/>
<Button x:Name="ClientPage_Buttonnouveau_Copy1" Content="OriginalFrame
Top right" Grid.Column="2" Margin="471,-150,-1,287" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<Button x:Name="ClientPage_Buttonnouveau_Copy" Content="OriginalFrame
Bottom Left" Margin="3,617,94,-480" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<!---FifthLine-->
</Grid>
<Grid Height="484">
<Grid.RowDefinitions>
<RowDefinition Height="149*"/>
<RowDefinition Height="227*"/>
<RowDefinition Height="45"/>
<RowDefinition Height="63*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="433*"/>
<ColumnDefinition Width="251*"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button x:Name="ClientPage_Buttoneffacer" Content="Effacer" Grid.Row="2" Grid.Column="0" Margin="0,0,2,4" IsEnabled="False"/>
<Button x:Name="ClientPage_Buttonprecedent" Content="<--" Grid.Row="2" Grid.Column="3" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonesuivant" Content="-->" Grid.Row="2" Grid.Column="4" Margin="0,0,1,4" />
<Button x:Name="ClientPage_Buttonajouter" Content="Ajouter" Grid.Row="2" Grid.Column="6" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonnouveau" Content="Nouveau" Grid.Row="2" Grid.Column="7" Margin="0,0,0,4" />
</Grid>
</StackPanel>
</Border>
The main problem you have is that you're using a StackPanel for your root layout panel. This is preventing your layout from expanding vertically.
You might want to consider using a Grid or a DockPanel instead.
I do not understand why the alignment of my (generated) XAML code is wrong.
XAML:
<ScrollViewer>
<StackPanel Orientation="Vertical">
<HeaderedContentControl Header="innerer Ex-Schutz Anforderung">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="IX02"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Ex-Zone"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[This][]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="5" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="IX04"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Ex-Gruppe"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[This][0173-1---ADVANCED_1_1#01-ADN507#007/0173-1#01-ADR534#007/0173-1#02-AAR158#007/0173-1#02-AAR159#005/0173-1#02-AAQ920#005/0173-1#02-AAO370#004]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="IX06"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Temp.klasse"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[This][0173-1---ADVANCED_1_1#01-ADN507#007/0173-1#01-ADR534#007/0173-1#02-AAR158#007/0173-1#02-AAR159#005/0173-1#02-AAQ920#005/0173-1#02-AAO371#004]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
</Grid>
</HeaderedContentControl>
<HeaderedContentControl Header="äußerer Ex-Schutz Anforderung">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="AX02"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Ex-Zone Umgebung"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[CboProcessConnection].PropertyList[EPROutsideZone]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="5" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="AX04"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Ex-Gruppe Umgebung"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[CboProcessConnection].PropertyList[EPROutsideGroup]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="AX06"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Temperaturklasse Umgebung"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[CboProcessConnection].PropertyList[EPROutsideTempClass]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
</Grid>
</HeaderedContentControl>
</StackPanel>
</ScrollViewer>
Here you can the the result:
Its not easy to see but the two yellow boxes on the right side should be exactly under each other. But the lower is a few pixels to the right.
Does anyone understand that?
Interestingly, when you enter a fixed width to the StackPanel (say, 1500), it works. But I do not want a fixed width.
You’ve got auto-width columns in separate grids. If you want columns in two different grids to be the same width, you have three options:
Fixed size. That’s lame and you don’t want it.
Put everything in one big grid.
Put Grid.IsSharedSizeScope=“True” on some common parent element of both grids, and add SharedSizeGroup=“SomeArbitaryName” on the autosized columns that are sizing slightly differently in the two different child grids, and which are positioning the third columns differently as a result (that’s the first column in each). This is the best solution in your case, I believe.
I defined the following DialogWindow:
<ui:DialogWindow x:Class="CodeElementRatingWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.12.0"
Title="CodeElementRatingWindow" Height="600" Width="800">
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px">
<Grid Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1" Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>
</ui:DialogWindow>
The layout basically consists of three rows. The first row has a title label, the bottom row two buttons and in the middle, I want to have a list of UI elements that I add dynamically in the code to the Grid there. Since I don't know in advance how many items that are, I want to display them in a ScrollViewer.
I can see that ScrollViewer is drawn, but the problem is, the ScrollViewer overlaps with the title label and is also somewhat clumsy. When I remove the ScrollViewer, this is not the case. So what am I doing wrong?
Just change the Grid.Row=1 for the ScrollViewer. It will work. Refer below code.
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1">
<Grid Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>
What I want to have:
a Grid-Splitter with 3 Columns
the MinWidth for all 3 Columns should work
the left and the right column should have a "defaultSize" like 100 and 200
when I resize the Form, only the column in the middle should resize. the columns on the left and on the right should stay the same size
if I add controls to the form, i want them to change their size according to the splitter
What I have:
I have a Grid with 3 Columns
the MinWidth for all 3 Columns works, but only with the ColumnWidth="*"
I dont know how to set a "DefaultSize" for the left and right column, because if I change the ColumnWidth, the MinWidth doesnt work anymore
when I resize the form, all 3 Columns change their size, not only the column in the middle
<ToolBarTray DockPanel.Dock="Top" IsLocked="True" Background="Pink">
<ToolBar Height="26" Background="Beige">
</ToolBar>
</ToolBarTray>
<StatusBar DockPanel.Dock="Bottom" Height="23" Background="Orange"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="50"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width ="*" MinWidth="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" MinWidth="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Width="5" ShowsPreview="True" Background="Red" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
<GridSplitter Grid.Column="3" Width="5" ShowsPreview="True" Background="Red" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
</Grid>
Thanks so far :)
set the width (default size) for left and right column and it should be work
<Grid>
<StatusBar Height="23" Background="Orange" DockPanel.Dock="Bottom"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" Width="200"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="100" Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="50" Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridSplitter
Width="5"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Red"
ShowsPreview="True"/>
<GridSplitter
Width="5"
Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Red"
ShowsPreview="True"/>
</Grid>
</Grid>
EDIT
here is a fix for the first grid maxwidth problem
<Grid x:Name="Root">
<Grid.Resources>
<local:MaxWidthConverter x:Key="MaxWidthConverter" />
</Grid.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50"
Width="200"
MaxWidth="{Binding ElementName=Root, Path=ActualWidth, Mode=OneWay, Converter={StaticResource MaxWidthConverter}, ConverterParameter=260}" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition MinWidth="200"
Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition MinWidth="50"
Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<GridSplitter Width="5"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Red"
ShowsPreview="True" />
<GridSplitter Width="5"
Grid.Column="3"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Red"
ShowsPreview="True" />
</Grid>
</Grid>
simple converter to calculate the maxwidth for the first column (260 = 200 minwidth + 50 minwidth + 5 splitter width + 5 splitter width
public class MaxWidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
double minWidth;
if (value is double && parameter is string && double.TryParse((string)parameter, NumberStyles.Any, CultureInfo.InvariantCulture, out minWidth)) {
var maxWidth = (double)value - minWidth;
return maxWidth < 0 ? 0 : maxWidth;
}
return 0;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return DependencyProperty.UnsetValue;
}
}
I have a 5 column layout. The aim is to have 3 main columns, (left, middle, right) which I could then expand and shrink. To achieve this I added two extra columns which contains the splitters. One between the left and middle column and another between middle and right.
After starting the application and moving the first spliter towards the left the last column (right) suddenly snaps all the way to the left, collapsing all three columns. Any suggestions? Thanks
Here's the XAML:
<Window x:Class="ThreeColumns.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="725">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10">
<TextBlock Text="Left side" FontSize="24"></TextBlock>
</Border>
<GridSplitter Background="blue" Width="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10">
<TextBlock Text="Middle" FontSize="24"></TextBlock>
</Border>
<GridSplitter Background="blue" Width="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Grid.Column="3"></GridSplitter>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10">
<TextBlock Text="Right side" FontSize="24"></TextBlock>
</Border>
</Grid>
</Window>
I managed to solve it by setting the first and last columns width to "auto" and the middle content column to "*":
<Window x:Class="ThreeColumns.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="725">
<DockPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" Width="auto" Name="Col1"></ColumnDefinition>
<ColumnDefinition Width="7" Name="Col2"></ColumnDefinition>
<ColumnDefinition Name="Col3" Width="*"></ColumnDefinition>
<ColumnDefinition Width="7" Name="Col4"></ColumnDefinition>
<ColumnDefinition MinWidth="50" Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
<TextBlock Text="Left side" Width="250" FontSize="24"></TextBlock>
</Border>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
<TextBlock Text="Middle" FontSize="24"></TextBlock>
</Border>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
<TextBlock Text="Right side" Width="250" FontSize="24"></TextBlock>
</Border>
<GridSplitter Background="blue" Width="5"
HorizontalAlignment="Center" ResizeDirection="Columns"
VerticalAlignment="Stretch" Grid.Column="1" Grid.ZIndex="1"/>
<GridSplitter Background="blue" Width="5"
HorizontalAlignment="Center" ResizeDirection="Columns"
VerticalAlignment="Stretch" Grid.Column="3" Grid.ZIndex="1"/>
</Grid>
</DockPanel>
</Window>
Your code works for me.
But I find it cleaner to use fixed width for the splitter and center it.
It the splitter is against the next column sometimes it seems to wack out.
Often need to use Auto for all but one.
If you try something like 2* 3* for relative sizing things often go bad.
If you want even sizing to start sometimes multiple single * will work.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto></ColumnDefinition>
<ColumnDefinition Width="7"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="7"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10">
<TextBlock Text="Left side" FontSize="24"></TextBlock>
</Border>
<GridSplitter Background="blue" Width="3"
HorizontalAlignment="Center"
VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10">
<TextBlock Text="Middle" FontSize="24"></TextBlock>
</Border>
<GridSplitter Background="blue" Width="3"
HorizontalAlignment="Center"
VerticalAlignment="Stretch" Grid.Column="3"></GridSplitter>
<Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10">
<TextBlock Text="Right side" FontSize="24"></TextBlock>
</Border>
</Grid>