WPF Using GridSplitter for individual Row Column in Grid - c#
I want to have GridSplitter that resizes only one cell (actually not correct term per se for WPF Grid, let's call it individual Grid[r][c]) and cell adjacent to it to be resized.
Here what I tried:
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0">
<TextBlock>Testing 1</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1">
<TextBlock>Testing 2</TextBlock> </Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="2">
<TextBlock>Testing 2</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0">
<TextBlock>Testing 3</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1">
<TextBlock>Testing 4</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="2">
<TextBlock>Testing 5</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="0">
<TextBlock>Testing 6</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="1">
<TextBlock>Testing 7</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="2">
<TextBlock>Testing 8</TextBlock></Border>
<GridSplitter Grid.Row="0"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="0"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="0"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="0"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
</Grid>
I want it to behave in a way that individual cell in the Grid shall be resized.
At app start
While resizing via grid splitter:
After Reisize:
I wanted that Only Grid[ 0][ 0] and Grid[ 0][ 1] to be resized
You have 3 columns and 3 lines, not 3 columns inside each line,
try this:
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="0"/>
<GridSplitter Grid.Column="1"/>
<GridSplitter Grid.Column="2"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</Grid>
Have own code (for "simplicity", sorry) which addresses vertical gridsplitting. Given time, will be including an update for the horizontal, but assuming it's no more than defining distinct grid columns instead of Celso's distinct grid rows.
There's certainly some issue in applying the particular member fields of GridSizeBehaviour.
Replace CurrentAndNext with the BasedOnAlignment property in the first attached vertical gridsplitting example to find that all rows are affected- not just the the row the gridsplitter was defined on.
To bug out GridSizeBehaviour, replace CurrentAndNext with PreviousAndCurrent in there for the 0'th row definition and find that once the gridsplitter is clicked, it never returns/loses visibility, along with the rest of the controls on the form.
<Window x:Class="GridSplitterSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
<Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
<Button Grid.Row="2" Grid.Column="0">Button 2</Button>
<Button Grid.Row="2" Grid.Column="2">Button 3</Button>
</Grid>
Perhaps there is an API solution to this? But using Celso's idea of nested grids, it works in the following code:
<Window x:Class="GridSplitterSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
</Grid>
<Grid Grid.Row="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0">Button 2</Button>
<Button Grid.Column="2">Button 3</Button>
</Grid>
</Grid>
More needs to be done with this, however, for if the user drags the gridsplitter to the edge of a form maximised to screen size, it cannot be retrieved! Looks like it was never the policy of MS to touch row/columns/cells in a grid, as they are basically user defined criteria.
Related
Fix an image at top right corner of wpf window irrespective of the height of grid row
I have to place an image on top right corner of grid. But it should not take the height of grid row. Means it should appear as a top layer of grid. How can I achieve this?
Doing like below, the height of grid row is increases as the height of image (Img_Data).
<Grid x:Name="LayoutRoot" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel x:Name="menu" Grid.Row="0" Grid.ColumnSpan="3" >
<Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Click="btnOpen_Click" Width="auto" Height="25"/>
<Button Margin="8" Width="100" Height="28" Content="Play" BorderBrush="Transparent" Name="btnPlay" Click="btnPlay_Click" Style="{StaticResource CommonButton}" >
</Button>
<Label x:Name="lblRecordTimer" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<Label x:Name="lblPlayMode" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
<Image Name="Img_Data" Source="/images/Data.png" HorizontalAlignment="Right" Width="187" Height="150" />
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Center">
<Label Content="Show Details" FontSize="18" Foreground="White" ></Label>
<fa:ImageAwesome Icon="Refresh" Foreground="Red" Visibility="Collapsed" Width="50" Height="50" x:Name="spinner1" Spin="True" SpinDuration="4" />
</StackPanel>
</Grid>
You can use Canvas as last child of your Grid. Like this: <Grid x:Name="LayoutRoot" Background="Black" > <Grid.RowDefinitions> <RowDefinition Height="auto"></RowDefinition> <RowDefinition Height="auto"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" ></ColumnDefinition> <ColumnDefinition Width="*" ></ColumnDefinition> <ColumnDefinition Width="*" ></ColumnDefinition> </Grid.ColumnDefinitions> <StackPanel x:Name="menu" Grid.Row="0" Grid.ColumnSpan="3" > <Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Width="auto" Height="25"/> <Button Margin="8" Width="100" Height="28" Content="Play" BorderBrush="Transparent" Name="btnPlay"> </Button> <Label x:Name="lblRecordTimer" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></Label> <Label x:Name="lblPlayMode" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label> </StackPanel> <StackPanel Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Center"> <Label Content="Show Details" FontSize="18" Foreground="White" ></Label> </StackPanel> <Canvas Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="3"> <Image Name="Img_Data" Canvas.Top="16" Canvas.Right="16" Source="/images/Data.png" Width="187" Height="150"/> </Canvas> </Grid>
Windows phone 8.1 universal app Image touch behaviour
I have a grid with images and textblocks, this is the xaml: <Grid x:Name="ContainerView" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid Grid.ColumnSpan="2" Grid.RowSpan="4"> <Image Source="ms-appx:/Images/background_azure.jpg" Stretch="Fill"/> </Grid> <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Gridway Mobile Lab" HorizontalAlignment="Center" FontSize="25" ></TextBlock> <Rectangle Grid.Row="1" Grid.Column="0" Tapped="ToSampling" /> <Image Grid.Row="1" Grid.Column="0" Margin="40,20,40,50" Source="ms-appx:/Images/prelievi.png" Stretch="Fill" Tapped="ToSampling" /> <TextBlock Grid.Row="1" Grid.Column="0" Margin="10,10,10,10" Text="Lista Prelievi" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> <Rectangle Grid.Row="1" Grid.Column="1" Tapped="ToSetting" Margin="10,10,10,10"/> <Image Grid.Row="1" Grid.Column="1" Margin="45,25,45,50" Source="ms-appx:/Images/settings.png" Stretch="Fill" Tapped="ToSetting" /> <TextBlock Grid.Row="1" Grid.Column="1" Margin="10,10,10,10" Text="Impostazioni" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> <Rectangle Grid.Row="2" Grid.Column="0" Tapped="ToSync" Margin="10,10,10,10"/> <Image Grid.Row="2" Grid.Column="0" Margin="40,10,40,50" Tapped="ToSync" Source="ms-appx:/Images/sync.png" Stretch="Fill" /> <TextBlock Grid.Row="2" Grid.Column="0" Margin="10,10,10,10" Text="Sincronizza" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> <Rectangle Grid.Row="2" Grid.Column="1" Tapped="ToMessages" Margin="10,10,10,10"/> <Image Grid.Row="2" Grid.Column="1" Margin="40,10,40,50" Tapped="ToMessages" Source="ms-appx:/Images/message.png" Stretch="Fill" /> <TextBlock Grid.Row="2" Grid.Column="1" Margin="10,10,10,10" Text="Avvisi" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> <Rectangle Grid.Row="3" Grid.ColumnSpan="2" Tapped="ToTimbs" Margin="10,10,10,10"/> <Image Grid.Row="3" Grid.ColumnSpan="2" Tapped="ToTimbs" Margin="25,20,25,20" Source="ms-appx:/Images/timbratura.png" Stretch="Fill" /> <TextBlock Grid.Row="3" Grid.ColumnSpan="2" Margin="10,10,10,10" Text="Timbrature" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Bottom" /> </Grid> My problem is simple, I want my images to have the same behaviour of a button when the user touches them. They simply have to "move back" and then come forward again exactly as the animation of touching a simple button. It is ok even if only the image is moving like that, but I don't really know how to achieve this, any help will be really appreciate. Thanks all and sorry for my bad english, if you need some more infos tell me
WPF datagrid multi Tier Header, editing cells
So I have a multi tier header, that is basically just a header with two sub headers underneath it,
the code for the look of the header is:
<Style x:Key="PlateDetailsmultitier" TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridHeaderStyleBase2Tier}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="49" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="1" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="49"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="49"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="LightGray" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Height="1" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.ColumnSpan="3"/>
<ContentPresenter Content="Plate Details" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Height="1" Grid.Row="1" Grid.ColumnSpan="3"/>
<ContentPresenter Content="t__plate" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="σy" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="3" Grid.Column="1" />
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="4" Grid.Column="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But the problem is that when I go to try to edit these cells it just selects both columns as one cell, and i can not edit either of these columns.
I would like to be able to edit both columns seperatly.
To start off datagrid template column I just used
<DataGridTemplateColumn HeaderStyle="{StaticResource PlateDetailsmultitier}" Width="100">
Is anyone aware of a solution to this problem.
5 Column layout with 2 gridsplitters - Unexpected behaviour
I have a 5 column layout. The aim is to have 3 main columns, (left, middle, right) which I could then expand and shrink. To achieve this I added two extra columns which contains the splitters. One between the left and middle column and another between middle and right. After starting the application and moving the first spliter towards the left the last column (right) suddenly snaps all the way to the left, collapsing all three columns. Any suggestions? Thanks Here's the XAML: <Window x:Class="ThreeColumns.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="725"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10"> <TextBlock Text="Left side" FontSize="24"></TextBlock> </Border> <GridSplitter Background="blue" Width="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10"> <TextBlock Text="Middle" FontSize="24"></TextBlock> </Border> <GridSplitter Background="blue" Width="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="3"></GridSplitter> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10"> <TextBlock Text="Right side" FontSize="24"></TextBlock> </Border> </Grid> </Window> I managed to solve it by setting the first and last columns width to "auto" and the middle content column to "*": <Window x:Class="ThreeColumns.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="725"> <DockPanel> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="50" Width="auto" Name="Col1"></ColumnDefinition> <ColumnDefinition Width="7" Name="Col2"></ColumnDefinition> <ColumnDefinition Name="Col3" Width="*"></ColumnDefinition> <ColumnDefinition Width="7" Name="Col4"></ColumnDefinition> <ColumnDefinition MinWidth="50" Width="auto"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2"> <TextBlock Text="Left side" Width="250" FontSize="24"></TextBlock> </Border> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2"> <TextBlock Text="Middle" FontSize="24"></TextBlock> </Border> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2"> <TextBlock Text="Right side" Width="250" FontSize="24"></TextBlock> </Border> <GridSplitter Background="blue" Width="5" HorizontalAlignment="Center" ResizeDirection="Columns" VerticalAlignment="Stretch" Grid.Column="1" Grid.ZIndex="1"/> <GridSplitter Background="blue" Width="5" HorizontalAlignment="Center" ResizeDirection="Columns" VerticalAlignment="Stretch" Grid.Column="3" Grid.ZIndex="1"/> </Grid> </DockPanel> </Window>
Your code works for me. But I find it cleaner to use fixed width for the splitter and center it. It the splitter is against the next column sometimes it seems to wack out. Often need to use Auto for all but one. If you try something like 2* 3* for relative sizing things often go bad. If you want even sizing to start sometimes multiple single * will work. <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto></ColumnDefinition> <ColumnDefinition Width="7"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="7"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10"> <TextBlock Text="Left side" FontSize="24"></TextBlock> </Border> <GridSplitter Background="blue" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10"> <TextBlock Text="Middle" FontSize="24"></TextBlock> </Border> <GridSplitter Background="blue" Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Column="3"></GridSplitter> <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10"> <TextBlock Text="Right side" FontSize="24"></TextBlock> </Border> </Grid>
GridSplitter inside Expander expanding beyond a height
I have a expander which contains a grid in which I have a grid splitter.
The Document Outline and UI is like this
and here is the code.
<Grid x:Name="TopGrid" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="150"/>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Expander x:Name="CompanyDescriptionExpander" Grid.ColumnSpan="2"
VerticalAlignment="Top" IsExpanded="True" Background="Black" >
<Expander.Header>
<Grid Width="{Binding ElementName=CompanyDescriptionExpander,
Path=ActualWidth}" Background="Aquamarine">
<TextBlock Grid.Column="0" Text="Expander Header" Foreground="Black" />
</Grid>
</Expander.Header>
<Expander.Content>
<Grid x:Name="DescriptionGrid" MaxHeight="130" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="25" MaxHeight="25"/>
<RowDefinition Height="Auto" MinHeight="25" MaxHeight="120"/>
<RowDefinition Height="4" MinHeight="10" MaxHeight="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="Orange" Grid.Row="0" Grid.RowSpan="2"
MinHeight="40" MaxHeight="120" x:Name="DescriptionText"
Text="TextBlock Content" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto" />
<Button x:Name="SaveIconButton" Grid.Column="1" Grid.Row="0" Width="20"
Height="20" VerticalAlignment="Top" />
<Button x:Name="CancelIconButton" Grid.Column="1" Grid.Row="1" Width="20"
Height="20" VerticalAlignment="Top" />
<GridSplitter ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"
Grid.Row="2" Grid.ColumnSpan="2"
Height="10" MaxHeight="10" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Background="Red" />
</Grid>
</Expander.Content>
</Expander>
<Button Grid.Row="1" Grid.Column="0" Margin="0,5,0,0" Height="20"
VerticalAlignment="Top" Background="Green" />
</Grid>
When we use grid splitter it expands
But it goes on even after textbox reaches its maximum height and gridsplitter goes behind button(green).
My problem scenario can be replicated copying my code in a project
I want that it should stop when textbox reaches its maximum height.
How to do that?
In your DescriptionGrid change the second rows MaxHeight from 120 to 95. The combined max height of the three rows in that grid exceeds the max height of the grid itself.