My demo app displays two rectangles which should fill whole browser's screen. There is a vertical splitter between them. This looks like a basic scenario but I have no idea how to implement this in xaml. I cannot force this to fill whole screen and when moving splitter then whole screen grows. Can anybody help?
<UserControl
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
x:Class="SilverlightApplication1.MainPage"
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"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="50">
</Border>
<controls:GridSplitter Grid.Column="1" VerticalAlignment="Stretch" Width="Auto" ></controls:GridSplitter>
<Border BorderBrush="Blue" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="2" MinWidth="50"></Border>
</Grid>
</UserControl>
GridSplitter just sucks. Try a docking control.
It is your column layout. You need star-sizing for the left and right columns, and auto for the middle:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
EDIT:
The correct way of using a grid splitter (in this particular case) appears to be to use just two columns in the grid. The grid splitter should then be placed in the first column, but aligned to the right. Like so:
<Grid x:Name="LayoutRoot"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Black"
BorderThickness="3"
Margin="3,3,13,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
MinWidth="50">
</Border>
<controls:GridSplitter Grid.Column="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Right"
Width="10"></controls:GridSplitter>
<Border BorderBrush="Blue"
Margin="3"
BorderThickness="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Grid.Column="2"
MinWidth="50"></Border>
</Grid>
I find that splitter and auto width just don't work.
Here's a fun sample page with silverlight samples.
http://www.xs4all.nl/~wrb/Articles/Article_WPFSplitPanels_01_SL.htm
Related
Here is the XAML:
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Background="Red"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5"></GridSplitter>
<Border Background="Green" Grid.Column="1"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5" Grid.Column="1"></GridSplitter>
<Border Background="Blue" Grid.Column="2"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5" Grid.Column="2"></GridSplitter>
</Grid>
</Window>
And I found that I can't resize the last Column width by the last GridSplitter.
In addition, all the other GridSplitter are working well.
Why it turns out to be this? And how can I solve this?
Thank you.
Try adding this to your Grid's RowDefinition as below (add an extra column with * as width to occupy remaining space).
<ColumnDefinition Width="*"></ColumnDefinition>
This is how your final Xaml looks like (only the content portion)
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Background="Red"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5"></GridSplitter>
<Border Background="Green" Grid.Column="1"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5" Grid.Column="1"></GridSplitter>
<Border Background="Blue" Grid.Column="2"></Border>
<GridSplitter HorizontalContentAlignment="Stretch" Width="5" Grid.Column="2"></GridSplitter>
</Grid>
Try and let us know if this is what you are looking for or need some other kind of help.
In a WPF Prism app, I have two separate views in two separate regions, say LeftRegion and RightRegion. I would like to be able to drag the edge of LeftRegion (ie. the view in LeftRegion) like a gridsplitter works. Any ideas on how to accomplish this? Thank you.
EDIT: Here is the ShellView.xaml called by bootstrapper.cs that defines the regions.
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="215"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl Grid.Column ="0" Height ="500" prism:RegionManager.RegionName="LeftRegion" />
<GridSplitter Grid.Column ="0" Width="5" HorizontalAlignment="Right" VerticalAlignment="Stretch" ResizeBehavior="CurrentAndNext"/>
<ContentControl Grid.Column="1" Height ="400" prism:RegionManager.RegionName="RightRegion" />
</Grid>
Since Prism regions are nothing but UIElements, typically ContentPresenters, you should be able to use a GridSplitter as usual:
<Window x:Class="WpfApp1.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:WpfApp2"
prism:RegionManager.RegionName="LeftRegion"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl prism:RegionManager.RegionName="LeftRegion" />
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<ContentControl Grid.Column="2" prism:RegionManager.RegionName="RightRegion" />
</Grid>
</Window>
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>
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.
I am new to WPF.
I have a wpf window which contains a grid which is dynamic in size along with its columns. This window is supposed to be a small utility type window that is always ontop.
The issue is as the user types into the richtextbox it expands of the bottom of the page, I would like a scroll bar to appear.
I have tried placing it in a container but this doesnt work.
I want the grid to resize if the user decides to resize the window.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="202" Width="927" WindowStyle="ToolWindow" ShowInTaskbar="True" Topmost="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
ResizeBehavior="PreviousAndNext"
Grid.Column="1"
Width="1"
ResizeDirection="Columns"/>
<GridSplitter HorizontalAlignment="Right"
ResizeBehavior="PreviousAndNext"
VerticalAlignment="Stretch"
Grid.Column="3"
Width="1"
ResizeDirection="Columns"/>
<StackPanel Grid.Column="2" Height="Auto">
<Label Background="SteelBlue" HorizontalAlignment="Stretch" Foreground="white" Height="25">Note</Label>
<RichTextBox ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" >
</RichTextBox>
</StackPanel>
</Grid>
</Window>
Have you tried:
<RichTextBox ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
***Height="300">***
</RichTextBox>
StackPanels do not do vertical layout, you should probably either use a DockPanel or a Grid with two Rows instead, that way the RichTextBox is bounded and knows when to use its scrolling functionality.
Thank H.B replacing StackPanel with grid worked. Alex adding the height didnt work sorry.
So I replace the StackPanel with
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Background="SteelBlue" HorizontalAlignment="Stretch" Foreground="white" Height="25">Note</Label>
<RichTextBox ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Row="1">
</RichTextBox>
</Grid>