I am developing a Silverlight web app and am working now on a child window which is separated in three columns. The left is for messages which will not be displayed always, and two (middle and right) which will be displayed always.
My question is: How can I make the right and middle column use up all the space if the left column doesnt need to show any data? So if for example my child window is 100 in width every of the three should be 33.333 or if the left one doesn't need to be displayed then the other two are both 50. Is there any way without messing in code behind?
Edit: The child window looks like this
<controls:ChildWindow ...
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Name="msgGrid" Grid.Column = 0/>
<Grid Grid.Column = 1/>
<Grid Grid.Column = 2/>
</controls:ChildWindow>
I am passing a bool value (showMessageToUser) into the constructor of the child window and based on that it should be determined what to do
Make the first column "Auto" size and the second two columns 1* (or just *) in width.
The first column will collapse to its contents (which presumably you will show/hide) and the second two will take up 50% each as the * sizing is just a ratio.
Put a name container (another grid?) in the first column and control its visible flag. The other 2 columns will take care of themselves.
<controls:ChildWindow ...
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="msgGrid1" Grid.Column=0 Width="100"/>
<Grid Grid.Column=1/>
<Grid Grid.Column=2/>
</controls:ChildWindow>
Control the visibility of msGrid1 to get the effect you wanted. If you also want user control of the the width if column 0 (e.g. with a GridSplitter) you will need code-behind as the two features do not work together.
Related
In Windows 8.1 I have a working Xaml Grid code that creates three columns two on the very left and right and one in the middle that fills the space.
<Grid x:Name="HeaderGrid" DataContext="{Binding}" MinHeight="40" Width="200"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
...
</Grid>
In Windows 10 the third column does not show up. By changing the Width of the second column to "Auto" I can see all the columns but that's not the UI design that I need.
It sounds to me like maybe the parent of the Grid is wider than you're expecting so the Grid is getting clipped on the right. Can I see more of the Xaml that holds the Grid? You can also check by setting the Grid's HorizontalAlignment to Right to try and figure out where the right edge of its parent is. If you're using VS2015RC you can use the "Live Visual Tree" tool while F5 debugging under Debug->Windows->Live Visual Tree.
I have Grid with 3 columns.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" MinWidth="215"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
In first column I have image.
In second Stack Panel.
In third I have my user control and I want to make it horizontal right, but it's align to left.
This is code for my third column
<local:MyControl
Grid.Column="2"
HorizontalAlignment="Right" />
There is no width defined for user control hence it will expand to fit all the width that is available in that column.
Note for 3rd Column <ColumnDefinition Width="*" />
If in your user control, you have designed the layout inside a grid, and the alignment of the elements inside the grid (possibly "LayoutRoot") is left, then the control will take up whole of your third column and your control wilol appear as if it is left aligned, even though you have aligned it to the right.
So, even though your control is aligned to the right, the elements inside the control may be aligned to the left and if the "LayoutRoot" of the control is a grid then maybe it is the cause of your problem.
I'm trying to do something very simple in Xaml but can't find the solution.
Would like to have 3 columns set this way:
Left column: contains an combobox that I want to be aligned on the left
Middle column: Contains a text from time to time. When displayed, want it to be centered in the remaining space.
Right column: Contains some Wrapping panel that I want aligned to the right.
So far I've done this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
The Middle column Xaml is:
<WrapPanel Grid.Column="1">
<TextBlock Name="UserInfoLogs" Text="{Binding Path=...}" />
</WrapPanel>
It aligns correctly the left and right columns' elements, but when displaying the centered text it is naturally aligned to the left of the middle column.
thanks!
You've got it, you're just missing one ingredient;
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Left"/>
<!-- Most of the time just setting the HorizontalAlignment will suffice,
except when the TextBlock object is for whatever reason allowed to
stretch further than its contents. In which case TextAlignment will
align the Text within the Center of itself. -->
<TextBlock Grid.Column="1" Text="Center"
HorizontalAlignment="Center" TextAlignment="Center"/>
<TextBlock Grid.Column="2" Text="Right"/>
</Grid>
Hope this helps.
I have the following grid using WPF and a few third party controls (Telerik):
<Grid x:Name="grid2" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="150"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*" MinWidth='80'/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition/>
</Grid.RowDefinitions>
<telerik:RadBreadcrumb Grid.ColumnSpan="3" Header="RadBreadcrumb"/>
<telerik:RadTreeView Grid.Row="1"/>
</Grid>
<GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="5" Height="auto"/>
<telerik:RadTransitionControl x:Name="Trans" Grid.Column="2" Width="auto"/>
</Grid>
Currently I am trying to make it so that the grid in column 0 (on the left side) will not re-size while re-sizing the window. I was able to achieve this effect by setting the width of column "0" to either a static 150 or auto. However, when I did this, the grid splitter no longer respected the minimum width of column 2 and allowed it to drag off the screen. By setting both column 0 and 2 to a width of star (the way I have it in the code now) the min widths are respected (the columns can't shrink past the 150 and 80 defined) but they don't re-size properly (the left column re-sizes in proportion to the right column). I would like to somehow get both the resize and the gridsplitter to work at the same time. Let me know if I wasn't clear enough or if more input is needed.
So, this isn't exactly what I was looking for, but it's doing the job for me:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="150" MaxWidth="1000"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
I set the MaxWidth of my left hand column so that you could no longer drag the splitter past the point of no return on the right side. This solution also allows me to set the first column's width to auto (which makes the re-sizing work the way I intended as well). Unless you have a monitor smaller than 1000px wide (which in the environment I'm working in won't happen) this solution will work just using XAML. Again, I'm a little disappointed with this solution but its at least working in a simplistic manner.
I have a ListView that takes up the entire width of the screen - I want the items to take up all available space. There will be a maximum of 4 per "screen". I will then want to put the ListView into a FlipView and take 4 items each "flip".
So far I have set the ItemsPanelTemplate to:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
This gives me the four columns, but puts all items into the first column. Perhaps this isn't the right method? If it is the right method, how do I set the column they should be in? Add a value to my object which equals "[Index in Collection] % 4" and set the ItemTemplate Grid.Column to this value?
This all seems a bit too complicated to do something which I imagine might be quite a bit more simple - is it?
Please refer to the following article,
http://www.scottlogic.co.uk/blog/colin/2010/11/using-a-grid-as-the-panel-for-an-itemscontrol/