I have a simple application with a Treeview and a main content area in a grid. The grid has a gridsplitter to resize, but this does not resize the Treeview.
I have read this is a bug,
but what is the simplest way to resize the Treeview?
<Window x:Class="TestGridSplitter.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.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TreeView Grid.Column="0">
<TreeViewItem>
My Treeview
</TreeViewItem>
</TreeView>
<GridSplitter Grid.Column="1" Width="5"/>
<TextBlock Grid.Column="2">
Main Content Area
</TextBlock>
</Grid>
Setting horizontal alignment or contentalignment to Stretch, does not work!
Moreover, it is necessary to set other properties of GridSplitter such as ResizeDirection="Columns" and ResizeBehavior="PreviousAndNext" properties. For example:
<GridSplitter Grid.Column="1" Width="5" ResizeDirection="Columns"
ResizeBehavior="PreviousAndNext"/>
Try the next approach:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="#feca00">
<TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">
Left Hand Side
</TextBlock>
</StackPanel>
<GridSplitter Width="4" Grid.Column="1" Background="Red" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
<Border Grid.Column="2" BorderBrush="#58290A" BorderThickness="5" CornerRadius="10">
<TextBlock FontSize="25" Foreground="#FECA00" TextWrapping="Wrap">
Right Hand Side
</TextBlock>
</Border>
</Grid>
Related
I'm already tired. I've tried all the ways. I need my text to be in the middle.
Before that, I centered the text by creating a separate DockPanel for it. Now I can’t do this because my interface structure is collapsing
I need center Text
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="1" Grid.Column="0">
*** MY OTHER CODE ****
</DockPanel>
<DockPanel Grid.Column="0" Background="#FF79A6A6" Name="mainMenuName">
*** MY OTHER CODE ****
</DockPanel>
<DockPanel LastChildFill="True" Grid.Column="1" Name="topMenu">
<TextBlock Text="SomeText" HorizontalAlignment="Center"/>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Horizontal">
<TextBox x:Name="Search" />
<Button Width="50" Name="SearchBtn" Content="Search" HorizontalAlignment="Center"></Button>
</StackPanel>
</DockPanel>
<DockPanel Name="mainContent" Background="Black" Grid.Row="1" Grid.Column="1">
*** OTHER CODE ***
</DockPanel>
</Grid>
emoacht
There is no point to use DockPanel if you don't set DockPanel.Dock attached property. Move the TextBlock below of the StackPanel and then set DockPanel.Dock="Right" at that StackPanel.
I have defined the following XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" />
<ColumnDefinition MinWidth="200" />
<ColumnDefinition MinWidth="500" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="2,2,5,2">
<GroupBox Header="Computer">
<DockPanel>
<ComboBox MinWidth="100" Name="cmbComputerNames" IsEditable="True" DockPanel.Dock="Left" HorizontalAlignment="Stretch" Width="auto" />
<Button Content="Connect" Name="bConnect" Width="65" HorizontalAlignment="Right" />
</DockPanel>
</GroupBox>
</StackPanel>
<Button Grid.Column="1" Content="Two" Margin="1,2,5,2" />
<Button Grid.Column="2" Content="Three" Margin="1,2,2,2" />
<GridSplitter Height="100" Width="4" Grid.Column="0"/>
<GridSplitter Height="100" Width="4" Grid.Column="1"/>
</Grid>
So, the left grid column is resizable. I want the "Connect" button to remain right-aligned and with same width. The combobox however, should be left-aligned and the width should grow as the column is resized, so the distance to the connect button remains the same.
Doesn't work:
Can anyone tell me how I can achieve that?
Since this is too long for a comment
Replace DockPanel with Grid and try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GroupBox Header="Some text here">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ComboBox MinWidth="100"/>
<Button Grid.Column="1" Content="A button" Margin="5"/>
</Grid>
</GroupBox>
<GridSplitter Grid.Column="1" Grid.RowSpan="2" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext" Width="10"/>
<Button Content="some button" Grid.Column="2"/>
</Grid>
#Andy, if you could produce an answer then I will delete mine.
In XAML, we typically have <Grid> layout which contains different elements. How do I align a control in one cell of grid to a control in a different cell like below?
(This used to be rather common in traditional applications where controls maybe in different group boxes etc but we still want to align them horizontally in one plane)
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column ="0">
<TextBox x:Name="name" Height="50"/>
<Label Content="John"/>
</StackPanel>
<StackPanel Grid.Column ="2">
<RadioButton Content="Option1"/>
</StackPanel>
</Grid>
The result is below which is ugly:
In this case, I just want to option1 to aligned centered with the TextBox (which does have custom height).
I can use margins to bring it to the desired position but that's kind of hard coded and not too WPFish.
Should I use binding to tie them directly? Is there a better way? Another way I can think of is to keep making grids within grids but seems like that will over complicate for this simple thing?
Try putting them both in another Grid or a horizontal StackPanel, and put that in one of the parent Grid cells.
The following did the trick, basically wrap the <RadioButton> around in <Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column ="0">
<TextBox x:Name="name" Height="50"/>
<Label Content="John"/>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<Border BorderBrush="{x:Null}" Height="50">
<RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center"/>
</Border>
</StackPanel>
</Grid>
This answer helped.
Now the result is:
Three variants.
The first - I will supplement #zar: I use size binding instead of explicitly assigning a value to the size.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column ="0">
<TextBox x:Name="name" Height="50"/>
<Label Content="John"/>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<Border BorderBrush="{x:Null}" Height="{Binding ActualHeight, ElementName=name, Mode=OneWay}">
<RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center"/>
</Border>
</StackPanel>
</Grid>
Second - I am implementing #Mark Feldman proposal: Delete StaskPanel and add lines to the grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="name" Height="50"/>
<Label Content="John"
Grid.Row="1"/>
<RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center"
Grid.Column="1"/>
</Grid>
The third - analogous to the first, but without the Border.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column ="0">
<TextBox x:Name="name" Height="50"/>
<Label Content="John"/>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<RadioButton Content="Option1" Margin="10,0,0,0" VerticalAlignment="Center" VerticalContentAlignment="Center"
Height="{Binding ActualHeight, ElementName=name, Mode=OneWay}"/>
</StackPanel>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="49*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Margin="30" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="Username:" />
<TextBox HorizontalAlignment="Stretch"/>
</StackPanel>
</StackPanel>
--Result image--
Im trying to make it so that the textbox will fill the rest of the space inside the current StackPanel.
however the "Stretch" propety doesn't seem to work - why is that?
Is there a different way do it or what am I doing wrong?
A StackPanel always tries to achieve the minimum possible height/width, depending on orientation; therefore, Stretch has no effect. You might want to use a DockPanel instead, which allows children to stretch:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="49*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1"
Margin="30"
VerticalAlignment="Center">
<DockPanel>
<TextBlock DockPanel.Dock="Left" Margin="0,0,5,0"
Text="Username:" />
<TextBox HorizontalAlignment="Stretch"/>
</DockPanel>
</StackPanel>
</Grid>
I have some trouble with setting the width of columns in my grid. I want to achieve that the most left column is at startup (of the application) 200 pixels width but is still resizeble. This is my code:
<Grid x:Name="MainGrid" Width="1000" Height="600">
<Grid x:Name="MainGrid" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="500"/>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" MinWidth="200"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox Grid.Column="0" x:Name="textBox" Text="Doei, Hoi" MinWidth="200"/>
</ScrollViewer>
<GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>
<ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox Grid.Column="2" x:Name="textbox1" Text="Hoi, Doei" MinWidth="200"/>
</ScrollViewer>
</Grid>
</Grid>
My problem is that I don't know how to set the startwidth of the columns. Maybe I used the wrong search words, but I couldn't find anything that solves my problem
Current Newest Code:
<Window x:Class="ServerWPF.MainWindow"
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/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ServerWPF"
mc:Ignorable="d"
Title="Chat Server" ResizeMode="CanMinimize" SizeToContent="WidthAndHeight">
<Grid x:Name="MainLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="500"/>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" MinWidth="200"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox Grid.Column="0" x:Name="textBox" Text="Doei, Hoi" MinWidth="200"/>
</ScrollViewer>
<GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>
<ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox Grid.Column="2" x:Name="textbox1" Text="Hoi, Doei" MinWidth="200"/>
</ScrollViewer>
</Grid>
</Window>
This worked for me, just set the starting width as the width. No need to set it again an all of the child elements that will resize to fit their containers.
I set MaxWidth on the left box to prevent it from scrolling content in the right box out of the visible area.
<Grid x:Name="MainLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MinWidth="200" MaxWidth="495" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" MinWidth="500" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox x:Name="textBox" Text="Left" />
</ScrollViewer>
<GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>
<ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox x:Name="textbox1" Text="Right" />
</ScrollViewer>
</Grid>
Try like below,
<Grid x:Name="GridLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200"/>
<ColumnDefinition Width="5" />
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>
</Grid>
Width="*" will divide your total space with the count of Width="*" and set the width for the column. so remove it and if you need you can use Width="Auto" which will take the width of the item inside the column.