I have three columns containing two expanders in left and right columns. When both the expnders collapsed, I need to arrage the content in the middle column on the full window. For that I need to calculate the gridlengths.
For Example
GridLength w1= new GridLength( 20 );
GridLength w2= new GridLength( 50 );
GridLength w3= new GridLength( 0 );
How to get
w3 = w2 - w1
Try this: Set the widths of the expandable ColumnDefinitions to Auto and the middle one to 1 star-unit. Control the width of the Expandable columns by setting the width on their contents. Then when they collapse, the middle column should expand to fill the available space.
Example:
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Expander Margin="0" VerticalAlignment="Top" Header="Expander" ExpandDirection="Right">
<Grid>
<Grid HorizontalAlignment="Left" Width="100" Background="Blue" Height="100"/>
</Grid>
</Expander>
<Expander Grid.Column="2" Margin="0" VerticalAlignment="Top" Header="Expander" ExpandDirection="Left">
<Grid>
<Grid HorizontalAlignment="Left" Width="100" Background="Blue" Height="100"/>
</Grid>
</Expander>
<Grid Background="Aquamarine" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1" />
</Grid>
Hope this helps
Related
I have the following window in my application:
<Grid Width="{Binding ActualWidth,
RelativeSource = {RelativeSource AncestorType = {x:Type Window}}}"
Height="{Binding ActualHeight,
RelativeSource ={RelativeSource AncestorType = {x:Type Window}}}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<DataGrid Grid.Column="0" x:Name="dataGrid" VerticalAlignment="Stretch" CanUserAddRows="False" IsReadOnly="True"/>
<DataGrid Grid.Column="2" x:Name="dataGrid2" VerticalAlignment="Stretch" CanUserAddRows="False" IsReadOnly="True"/>
<GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="5"/>
</Grid>
<StatusBar Grid.Row="1" Height="20">
<StatusBarItem x:Name="StatusBarInfo" Content="Offset:" HorizontalAlignment="Right" />
</StatusBar>
</Grid>
In the designer view everything appears as expected, with two dataGrids, separated by a gridSplitter, and the status bar on the bottom of the screen. for some reason, when running the application, the layout is slightly different, the grid containing the dataGrid overlaps the status bar.
It makes me think something about my display settings on Windows 10 is causing me problems.
This is my first WPF application, I am still learning.
Maybe setting the Width and Height of the root Grid prevents you from achieving the goal. I believe by default, the grid will take the rest (*) of the space of the Window if you do not set the row height and column width. Alternatively, instead of setting the Width and Height of the first Grid you can set its VerticalAlignment and HorizontalAlignment to "Stretch"
If you have any data inside dataGrid it could stretch and overlap status bar. If this is the problem, try using:
<ScrollViewer> (data grid here) </ScrollViewer>
I have textboxes with some textblocks above it.
I want my application to have resizable width (not height) so I have setted only MinWidth for window. So when I click on right or left border of window I can scale it however I want.
My problem is, that when I use textboxes I don't get result what I would like to have.
If I position textboxes with textblock above it on MinWidth of window, after making the window bigger those textboxes will stay with same width on the same place according to ColumnDefinitions.
It does make sence since those textboxes have fixed width setted on 160 but if I try same thing with buttons according same columndefinitions and stuff those buttons gonna stretch according window size and it will be sorted by columndefintions.
Is there way how to acomplish same thing with textboxes? So when I stretch window from 1050px to full size 1920px mine textboxes would change width so it can be dynamically? Width="Auto" doesn't solve it for me
Adding images below so you can imagine it better hopefully.
xaml:
<UserControl x:Class="App.NewUI.Textboxes"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:App.NewUI"
mc:Ignorable="d"
d:DesignHeight="720" MaxHeight="720" d:DesignWidth="1050">
<Border Padding="10">
<StackPanel>
<!-- TextBoxes + update button -->
<Grid Margin="0 5 0 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="txtBoxFirstname" Text="{Binding SelectedItem.Firstname, ElementName=dg}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Width="160"/>
<TextBox x:Name="txtBoxLastname" Text="{Binding SelectedItem.Lastname, ElementName=dg}" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="160"/>
<TextBox x:Name="txtBoxTelephone" Text="{Binding SelectedItem.Telephone, ElementName=dg}" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" Width="160"/>
<TextBox x:Name="txtBoxBorn" Text="{Binding SelectedItem.Born, ElementName=dg}" Grid.Column="3" HorizontalAlignment="Left" VerticalAlignment="Center" Width="160"/>
<TextBox x:Name="txtBoxCategory" Text="{Binding SelectedItem.Category, ElementName=dg}" Grid.Column="4" HorizontalAlignment="Left" VerticalAlignment="Center" Width="160"/>
<Button x:Name="btnUpdateRecord" Content="Update Record" Grid.Column="5" Click="btnUpdateRecord_Click"/>
</Grid>
<!-- datagrid -->
<Grid Margin="0 15 0 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<DataGrid x:Name="dg" Grid.Column="0" Margin="0,0,0,-350" Width="auto" Height="350"/>
</Grid>
</StackPanel>
</Border>
I've tried to set textboxes width to auto but then textboxes will be tiny without text and won't stretch anyway. Thank you for any tip
Imgur images of window
Deleting fixed width and set horizontal alignment to strech figured it out.
<TextBox x:Name="txtBoxFirstname" Text="{Binding SelectedItem.Firstname, ElementName=dg}" Grid.Column="0" HorizontalAlignment="stretch" VerticalAlignment="Center"/>
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.
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"/>
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