After setting SharedSizeGroup="B" to every second column of the subgrids. Column became unchangeable(always have one width) and width="1*" does not work. Is it possible to make that column resizeble but with SharedSizeGroup="B".
<Window x:Class="WpfApplication23ColumnsGroup.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Grid.IsSharedSizeScope="True">
<Grid Height="100">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A"></ColumnDefinition>
<ColumnDefinition Width="1*" SharedSizeGroup="B"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Test"></Label>
<TextBox Grid.Column="1" MinWidth="120" MaxWidth="240"></TextBox>
<TextBox Grid.Column="2" MinWidth="120" MaxWidth="240"></TextBox>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="B"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="TestTestTest"></Label>
<TextBox Grid.Column="1"></TextBox>
<TextBox Grid.Column="2"></TextBox>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="B"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="TestTestTestTestTestTest"></Label>
<TextBox Grid.Column="1"></TextBox>
<TextBox Grid.Column="2"></TextBox>
</Grid>
</Grid>
</Grid>
</Window>
From here:
You can set the width of a column in a Grid (or height of a row) in three different ways: auto, explicit size, or star sizing.
When you're using the SharedSizeGroup property to set multiple columns (or rows) to the same width (or height), the method that you use for setting the column width (or row height) affects the final size as follows:
Star sizing — not honored, treated as Auto
Absolute sizing — takes priority over Auto, columns are set to maximum explicit width
Auto sizing — if all columns are Auto, size is set to fit the largest content. If any columns use explicit width, the explicit width value takes precedence
Related
I have a problem designing my GUI in wpf.
How do i set the Grid ColumnDefinition Width dynamically,
I have a expander. And when the expander is clicked the grid should also expand and adjust with the size of the expander
As of now i have this GUI
enter image description here
And this is the xaml code
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="127"/>
<ColumnDefinition Width="665*"/>
</Grid.ColumnDefinitions>
<Expander Background="Gray" x:Name="expander" ExpandDirection="Right" Expanded="Expander_Expanded" >
<Expander.Header>
<TextBlock Text="Objects">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>
<StackPanel Margin="10,4,0,0">
<CheckBox Margin="4" Content="Option 1" />
<CheckBox Margin="4" Content="Option 2" />
<CheckBox Margin="4" Content="Option 3" />
</StackPanel>
<!-- Stuff XD -->
</Expander>
<Grid Grid.Column="1" Background="Red"/>
</Grid>
As of now the ColomnDefinition width is 127
I want it to adjust to at least 30. So the window will be filled with other stuff
like this
enter image description here
But my problem is how do i expand the grid when the expander is expanded.
And another thing. I can't get the size of the expander when expanded. It gives me NaN which i can't use to set the columndefinition width
Thank you so much. Sorry for my bad english
Use Auto in first column Width and it will define size of expander based on content.
If you would like that column "0" has some min Width just set the property MinWidth. (but in that case I will not recommend, but show below)
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
Also I will recommend use GridSplitter, then you will have splitter between two columns that allows to change width of columns by user in UI
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="30"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="DarkSalmon"/>
Also in expander you can only have one user-control, so "stuff" you said need to be inside some layout control like stack-panel,dock or another grid etc.
Let me know if it works as you expected.
I'm making a program for viewing images and I met with a problem that wide pictures go beyond the window.
I set the property "stretch" to "uniform" but it doesn't work with wide pictures. What can I do?
An example of this problem:
And if I expand window it will be this
This is XAML of image:
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="300" Width="0.1*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="300" Width="*"/>
</Grid.ColumnDefinitions>
<TreeView Style="{StaticResource BorderStyle}" ScrollViewer.VerticalScrollBarVisibility="Auto" Name="folders" Grid.Row="0" Grid.Column="0" TreeViewItem.Expanded="treeView_Expanded">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Nodes}">
<StackPanel>
<Label HorizontalAlignment="Stretch" Cursor="Hand" Content="{Binding fileName}" Foreground="#FFF"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
<GridSplitter Margin="-5 5 -5 5" Cursor="SizeWE" Grid.Row="0" Grid.Column="1" VerticalAlignment="Stretch" ShowsPreview="False" Width="5" HorizontalAlignment="Center" Background="Transparent"/>
<Border Style="{StaticResource BorderStyle}" Grid.Row="0" Grid.Column="2">
<Image Name="ImageViewer"/>
</Border>
</Grid>
The image is sizing itself to its parent, but the MinWidth="300" in your first and third grid column definitions is forcing the parent to be wider than the window. MinWidth overrides Width if the two disagree.
If you change to these values, it won't do that any more except when the window is too narrow to be much use anyway:
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="30" Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="4*"/>
</Grid.ColumnDefinitions>
I'm not sure what you were getting at with what you had: The number/* Width values (the System.Windows.GridLength structure, whose documentation meets the usual regrettable standard of WPF documentation) work in a not immediately obvious way. The following creates three columns. The middle one is sized to its content. The first one uses one eleventh of the remaining space; the last one uses ten elevenths of the remaining space. "*" means "1*". We add all the numeric values and pro-rate the available space accordingly.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
That's exactly equivalent to this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
It's proportional.
So your MinWidth values seem wrong to me, unless you have a truly enviable monitor setup. What I've given you will make the image area four times the width of the left sidebar, which is a rough guess at what you seem to be looking for. I like those proportions.
Trying to use GridSplitter but it's not working. Dragging the splitter to the left is fine, but dragging to the right has no effect. I think the Right grid is the problem. But I'm not sure. Please give me some advice.
Here is my code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="{DynamicResource DefaultMargin}"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition x:Name="columnDefinition_One" Width="{DynamicResource DefaultMargin}"/>
<ColumnDefinition x:Name="columnDefinition_Two" MinWidth="230" Width="{Binding ActualWidth, ElementName=Element1}"/>
</Grid.ColumnDefinitions>
<Grid x:Name="Layout" Grid.Row="2" Grid.Column="0">
</Grid>
<GridSplitter x:Name="gridSplitter" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext" Grid.Column="1" Grid.Row="2" Background="{StaticResource DarkGray}" />
<Grid x:Name="grid_MonitoringView" Grid.Row="2" Grid.Column="2" Style="{DynamicResource DefaultPanel}" HorizontalAlignment="Stretch">
<Border>
<view1:ViewExample x:Name="viewExample"/>
</Border>
</Grid>
</Grid>
I copied your code into my demo project, and it works fine for me. #lomed found that you might have an incorrect MinWidth value and I agree with that too. But you say that your 'grid_MonitoringView' has not been affected.
Do you notice that my right border layout correctly? So the real problem is ViewExample class. Your ViewExample has incorrect layout values such as MinWidth or other visuals inside with larger layout width.
the GridSplitter cant reduce width of column than their MinWidth value.
You'll see it works fine if you maximize the window,
or for demostartion try remove the MinWidth value:
<ColumnDefinition />
<ColumnDefinition x:Name="columnDefinition_One" Width="50"/>
<ColumnDefinition x:Name="columnDefinition_Two"/>
I have this XAML code:
<StackPanel Orientation="Horizontal" Margin="0">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel x:Name="Miniaturas" Orientation="Vertical" MinWidth="100" Width="Auto" Grid.Column="0" Height="Auto" ScrollViewer.CanContentScroll="True">
</StackPanel>
</ScrollViewer>
<Grid Margin="1">
<WindowsFormsHost x:Name="VistaPrevia" Width="Auto"/>
</Grid>
</StackPanel>
What I'm trying to do is simulate two columns. Why? because WindowsFormsHost Can't be stored into ColumnDefinition it throws this error:
Can't add value Type "WindowsFormHost" to a dictionary or collection of type "ColumnDefinitionCollection.
Usually I Do this with this code:
<Grid Margin="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<WindowsFormsHost x:Name="VistaPrevia" Width="Auto"/>
</Grid>
How can I do to obtaind the same efect without using ColumnDefinition
Note: I need two columns one with fixed width size and another that uses the remaining width of the window.
Pull down VS2013 express and see if that error has been fixed in the parser. Also verify you have installed update 4 for Visual Studio 2012 to see if it fixes the issue.
The error you have seen occurs because you did something like this
<Grid Margin="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
<WindowsFormsHost x:Name="VistaPrevia" Width="Auto"/><!-- fail -->
</Grid.ColumnDefinitions>
</Grid>
P.S.: and the answer is use Grid.
I'm adding rows to a grid in the code behind, but each time some of the rows at the end get displayed on top of each other (overlapping; as though they were in the same row). I know that the row numbers I'm setting are not the same, and that each row has a height of auto.
The grid has no fixed height but is within a tab header of fixed height. I'm using a scroll bar with the grid and that works fine (it expands when I add more items), but there are always some number of rows at the end that are overlapping. So it's not like the grid is only accepting a fixed number or is staying at a fixed length. Even if I add a few rows, and the grid only takes up half the screen, the last couple of rows will be overlapping at the end.
Nothing I try to do with the grid seems to change anything - I tried setting the height to auto, to a fixed height, it was all the same. I'm really confused as to what is going on.
Any suggestions would be extremely appreciated. I know a DataGrid might work better here but for now I need to stick with this grid.
This is my xaml code:
<TabControl Grid.ColumnSpan="5" Grid.RowSpan="15" Height="640">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal" Height="23" VerticalAlignment="Center">
<Image Source= "image.png" Margin="0,-3,0,0" VerticalAlignment="Center" Height="17" />
<TextBlock Margin="5,0,0,0" VerticalAlignment="Center">text</TextBlock>
</StackPanel>
</TabItem.Header>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid Name="myGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="5"/>
<RowDefinition Height="1"/>
<RowDefinition Height="20"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
</TabItem/
...
And in the code behind I am adding rows (to the existing ones) in this way:
RowDefinition rowNew1 = new RowDefinition();
rowNew1.Height = new GridLength(1, GridUnitType.Auto);
myGrid.RowDefinitions.Add(rowNew1);
TextBlock tb = new TextBlock();
tb.Text = some_string;
myGrid.Children.Add(tb);
tb.Margin = new Thickness(10, 0, 0, 0);
Grid.SetRow(tb, some_number);
Works fine for me. Make sure the row number you're setting it to is in fact the correct index:
Grid.SetRow(tb, myGrid.RowDefinitions.IndexOf(rowNew1));