Using Kaxaml, resizing from the left works as expected.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Width="5" Background="DarkGray" HorizontalAlignment="Right"></GridSplitter>
<Rectangle Grid.Column="0" Fill="Red" Height="100"/>
<Rectangle Grid.Column="1" Fill="Yellow" Height="100"/>
<Rectangle Grid.Column="2" Fill="Green" Height="100"/>
</Grid>
</Grid>
</Page>
However when trying something similar on the right it behaves very differently.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Width="5" Background="DarkGray" HorizontalAlignment="Left"></GridSplitter>
<Rectangle Grid.Column="0" Fill="Red" Height="100"/>
<Rectangle Grid.Column="1" Fill="Yellow" Height="100"/>
<Rectangle Grid.Column="2" Fill="Green" Height="100"/>
</Grid>
</Grid>
</Page>
Oddly only dragging right works and the size happens in an almost inverse manner.
For the first column change Width="*" to Width="Auto".
Related
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.
I have a simple wpf application where I want to remove one column and have the remaining (in column 2) fill the window when ctrl+space is pressed. I've looked into keybinding and commands, but I can't figure this one out.
Code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="268" MinWidth="188" MaxWidth="346"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" Height="64" Width="5"/>
<Grid Grid.Row="0" Grid.Column="2"/>
<Label Grid.Row="0" Grid.Column="0" Content="Collections" FontFamily="Noto Sans" Foreground="#FF9B9B9B" FontSize="16" Name="TESTTEST" />
<Button Content="Add" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Right" Grid.ColumnSpan="2" Margin="0,7,3,0" />
</Grid>
<StatusBar Grid.Row="1" Background="#FF151515" Foreground="#FF636363" BorderBrush="#FF1D1D1D"/>
</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.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="100"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Canvas Grid.Column="0" HorizontalAlignment="Stretch" Background="Orange"/>
<GridSplitter Grid.Column="1" Width="4" Background="Black" />
<Grid Grid.Column="2" />
When I resize the Canvas in column 0, the canvas is not stretched to fill its column.
The stretch doesn't seem to work.
When I use Width="*" (which I actually do not want) for the first column I canot move the spliter to the left.
My requirement is that the first column is resizable (with a minimum) and that the canvas fills the first column.
Try this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="100"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Canvas Grid.Column="0" Grid.ColumnSpan="2" Background="Orange" />
<GridSplitter Grid.Column="1" Width="4" Background="Black" />
<Grid Grid.Column="2" Background="Green"/>
</Grid>
Grid.ColumnSpan="2" is the key.
You need to set HorizontalAlignment="Stretch" on Grid Splitter to get it work.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="100"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Canvas Grid.Column="0" HorizontalAlignment="Stretch" Background="Orange"/>
<GridSplitter Grid.Column="1" Width="4" Background="Black"
HorizontalAlignment="Stretch" /> <-- HERE
<Grid Grid.Column="2" />
I have a WPF Window that has a custom border, Thumb controls for resizing, and a two-column layout. The right column (main content area) is a UserControl with a ScrollViewer, so it scrolls as needed. I want to add a ScrollViewer to the left column, but when I do, at runtime it gives me
Initialization of 'System.Windows.Controls.Primitives.ScrollBar' threw an exception.
with an inner exception of
Unable to cast object of type 'MS.Internal.NamedObject' to type 'System.Windows.FrameworkTemplate'.
If I take the ScrollViewer out, everything works fine again.
Here's the basic XAML (with the ScrollViewer wrapped around the TaskPane ItemsControl):
<Window x:Class="MyWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="525" MinWidth="200"
Height="350" MinHeight="85"
FontFamily="Segoe UI"
AllowsTransparency="True" Background="Transparent"
ResizeMode="CanResize" WindowStyle="None">
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="22"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
<TextBlock Name="Caption" Text="My Window"/>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical">
<!-- Minimize/Maximize/Close buttons -->
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="0" Grid.Row="1">
<ItemsControl Name="TaskPane">
...
</ItemsControl>
</ScrollViewer>
<StackPanel Name="MainContent" Grid.Column="1" Grid.Row="1" Orientation="Vertical">
...
</StackPanel>
</Grid>
</Grid>
<ResizeGrip Name="ResizeGrip" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="16" Height="16" Padding="0 0 18 18"/>
<Thumb Name="TopLeftThumb" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNWSE" DragDelta="TopLeftThumb_DragDelta"/>
<Thumb Name="TopThumb" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Opacity="0" Cursor="SizeNS" DragDelta="TopThumb_DragDelta" />
<Thumb Name="TopRightThumb" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNESW" DragDelta="TopRightThumb_DragDelta"/>
<Thumb Name="LeftThumb" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" DragDelta="LeftThumb_DragDelta" />
<Thumb Name="RightThumb" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" DragDelta="RightThumb_DragDelta" />
<Thumb Name="BottomLeftThumb" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNESW" DragDelta="BottomLeftThumb_DragDelta"/>
<Thumb Name="BottomThumb" Grid.Column="1" Grid.Row="2" VerticalAlignment="Bottom" Opacity="0" Cursor="SizeNS" DragDelta="BottomThumb_DragDelta" />
<Thumb Name="BottomRightThumb" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNWSE" DragDelta="BottomRightThumb_DragDelta"/>
</Grid>
</Border>
I've searched online, but can find anything on this. I've tried creating another UserControl with a ScrollViewer as the layout root, and get the same error.
By any chance do you have a ScrollViewer style defined in any of your resources somewhere? I saw this link which may be related: http://blog.alner.net/archive/2010/05/07/wpf-style-and-template-resources_order-matters.aspx
The error usually occurs when one style uses a 2nd style, but that 2nd style gets added after the 1st one does. Rather hard error to diagnose.
Don't know if this is the issue, but you didn't set the row and column of the 'StackPanel' after 'ScrollViewer'.