I am stuck in resolving the GridSplitter to work.I have a DockPanel which has a Grid which is DockPanel.Dock="Bottom" and I have a GridSplitter which is also DockPanel.Dock="Bottom".
But the GridSplitter is not working and not allowing to resize the layout.
Maybe I am doing is completely wrong.Please correct me and tell me how can I perform this GridSplitter functionality.
Here is the Xaml I have:
<DockPanel Name="DocMain" LastChildFill="True">
<Grid DockPanel.Dock="Bottom">
<ScrollViewer Style="{StaticResource NotificationRegion}">
<TextBox Style="{StaticResource NotificationTextBlockStyle}" Name="Notification_Block"
Text="{Binding TxtBlkNotificationBar}"/>
</ScrollViewer>
<GridSplitter DockPanel.Dock="Bottom" Background="Black" Height="2" Width="Auto" ResizeDirection="Rows" HorizontalAlignment="Stretch"/>
</Grid>
</DockPanel>
Gridsplitter only works inside the grid its supposed to be splitting, for example
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="5"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" ResizeBehavior="PreviousAndNext" BorderBrush="black" BorderThickness="5"/>
</Grid>
makes a grid with 3 columns with 2 columns for content and one for the splitter, gridsplitter is specified to be inside column #2 and resize the cells its placed between.
Related
Learning basic concepts of WPF before moving to UWP. Following XAML in my WPF project is showing the windows as below.
I'm trying to display the Rectangle and Button on the right side of the StackPanel and need the Rectangle (not the Button) control to auto fill the StackPanel.
I tried the HorizontalAlignment="Stretch" with no Width attribute but without Width attribute the entire rectangle shrinks to 0 width. Don't want to hard code the width value (if possible) so that window of the app adjust itself depending on the device it's on (screen resolution). But if that scenario is still possible with hard coded width value as well please let me know that approach as well.
Window:
XAML:
Remark: I don't think ListBox is playing any role (related to this post). Only controls inside the ListItemsControl on above ListBox probably need proper adjustment. but I may be wrong.
<Window x:Class="WPFProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="376"
Width="337">
<Grid>
<ItemsControl>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Height="10">
<Rectangle x:Name="myRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Right" Height="9" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.533,0.6"/>
<Button Content="" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold"/>
</StackPanel>
</ItemsControl>
<ListBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,11,0,81" ScrollViewer.HorizontalScrollBarVisibility="Disabled" x:Name="myList" SelectionChanged="myList_ContextMenuClosing">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Rectangle Fill="{Binding FirstName}" ToolTip="{Binding FullName}" Width="20" Height="20" Stroke="#FF211E1E" OpacityMask="Black" StrokeThickness="1" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="btnTest" Content="Test" HorizontalAlignment="Left" Margin="250,298,0,0" VerticalAlignment="Top" Width="75" Click="BtnTest_Click"/>
</Grid>
</Window>
Two things here:
When you use Stackpanel with horizontal orientation, horizontalalingment="stretch" can't be used. That is because all of the elements are being Stacked with their designed width.
You are specifying a fixed width of 100 for your rectangle. If you do that it will not stretch anymore even if you use stretch for alignment. Also the horizontalalingment="stretch" needs to be placed on the element you are expecting to stretch, not the Panel.
For things like this use DockPanelor a Grid instead.
Read more about WPF panels here:
https://wpf-tutorial.com/panels/introduction-to-wpf-panels/
Here is an example for Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="myRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Stretch" Height="9" Margin="0,0,0,0"
Stroke="Black" VerticalAlignment="Top" RenderTransformOrigin="0.533,0.6" Grid.Row="0"/>
<Button Content="" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold" Grid.Column="1"/>
</Grid>
Notice the width="*" attribute means the cell will use all the remaining space. If you have multiple rows/columsn defined with * the space will be divided between them.
Stack Panel acts like a stack of things placed one after another. It can be horizontal or vertical. Unlike Grid you cannot access particular place in a stack panel, every next element will be placed after one another in a sequence.For your requirement a StackPanel is not suitable unless you need to have horizontal scrolling. You should try a DockPanel or Grid instead like
<Grid Height="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<!--first column of grid-->
<Rectangle Grid.Column="0" x:Name="myRectangle" Fill="#FFF4F4F5" Height="9" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top" RenderTransformOrigin="0.533,0.6"/>
<!--second column of grid-->
<Button Grid.Column="1" Content="" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold"/>
</Grid>
I am creating a new WPF Application where the main window has a grid inside a dock panel. The grid will have 3 columns and one row, out of which the middle column is dedicated for the GridSplitter. The other two columns have a dock panel each, which will have any content (to be created in run-time). My problem is that despite multiple approaches to make the GridSplitter visible, I have not been successful.
I have even followed tips given in this How To page in Microsoft documentation, but to no fruition:
https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-make-sure-that-a-gridsplitter-is-visible
Here is my XAML code:
<Window
...
Height="600"
Width="650">
<DockPanel LastChildFill="True">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<DockPanel Name="LeftDockPanel" Grid.Column="0" LastChildFill="True" Width="350" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightCyan">
</DockPanel>
<DockPanel Name="RightDockPanel" Grid.Column="2" LastChildFill="True" Width="300" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Azure">
</DockPanel>
<GridSplitter Width="5" Background="Red" Grid.Column="1" BorderBrush="Red"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Margin="3,0,3,0" ResizeBehavior="PreviousAndNext" Panel.ZIndex="1"/>
</Grid>
</DockPanel>
</Window>
I've attempted the following with my code:
Assigned a ZIndex=1 to the grid splitter while it shares a column with the LeftDockPanel
Dedicated a column explicitly for the splitter, assigning it a width
Ensured that the GridSplitter is the last control added to the grid
Combination of 2, 3 and 4 - As you see in the code.
On hovering the mouse in the appropriate area, the cursor does change to expose the gridSplitter, but it is never visible. Even the resizing actions are working as expected.
What am I missing or doing wrong that the GridSplitter is not visible?
Your issue is not reproducible. Maybe you have defined an implicit Style somewhere. Try to set the Template property to a custom template:
<GridSplitter Width="5" Background="Red" Grid.Column="1" BorderBrush="Red"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Margin="3,0,3,0" ResizeBehavior="PreviousAndNext">
<GridSplitter.Template>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"/>
</ControlTemplate>
</GridSplitter.Template>
</GridSplitter>
I have a DockPanel and it contains a ScrollViewer [ center aligned ] and a button on left and right .
My xaml is like
<DockPanel LastChildFill="True">
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch" DockPanel.Dock="Left">Left</Button>
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch" DockPanel.Dock="Right">Right</Button>
<ScrollViewer Name="scrollAreaPageView" HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
</ScrollViewer>
</DockPanel>
And it generates the output as expected , but Left and right butons are not stretched fully to left and right to the ScrollViewer( They are on corners only).
The screen shot of output is
How can i make it stretch fully to left and right of center scrollViewer
A DockPanel may not be ideal in this scenario you may perhaps use Grid here with the desired column definition
sample
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button>Left</Button>
<ScrollViewer Name="scrollAreaPageView"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Column="1">
</ScrollViewer>
<Button Grid.Column="2">Right</Button>
</Grid>
in above example the space available after subtracting the space required b
Alternate approach
I attempted to do it pure xaml, this approach will helo you achieve the desired without code behind. here is the example
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="{Binding ActualWidth,ElementName=scrollAreaPageView}" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button>Left</Button>
<Button Grid.Column="2">Right</Button>
</Grid>
<ScrollViewer HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="50,0"
Name="scrollAreaPageView"
HorizontalScrollBarVisibility="Auto">
</ScrollViewer>
</Grid>
Margin in the scrollAreaPageView element defines minimum width of the buttons. give it a try and see if that helps
I'm newer in wpf,recently i have a requirement need to create an listbox and when i practice in DataTemplate ,the issue comed.my layout code like below
<ListBox HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
<ListBoxItem HorizontalAlignment="Stretch">
<Grid ShowGridLines="True" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="2"
Width="200" Height="40" Fill="Gray"/>
</Grid>
</ListBoxItem>
</ListBox>
the begining,i set the width 100 on the first column,because the Rectange's width become to 200,so the first column width become more greater than 100,what happend when the grid to measue the child element?i am confused about it ,because i put the code in an commen state it run normally.any one tell me ,thanks
I am going through the process of designing my first Silverlight application based upon the PivotViewer control from Silverlight 4. I am having problems organizing the bar at the top as per my design:
(source: richard-slater.co.uk)
I have found ways of left aligning the Logo and Title, a way of right aligning the buttons with various combinations of panels however there are two major problems with it.
The XAML looks really really ugly, nesting panels seems to work but doesn't seem like good practice.
I can't seem to find a way of handling resizing the window down without either clipping or overlapping.
I have acheived the best results with the following code:
<StackPanel x:Name="LayoutHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
<Image x:Name="LogoImage" Height="50" Width="50" Source="/EVEMonPivot;component/EVEMonLogoBlue.png" Grid.Column="0" Grid.Row="0" />
<TextBlock x:Name="TitleText" Height="50" Text="EVEMon Pivot" FontSize="40" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontWeight="Bold" Padding="10,0,0,0" />
</StackPanel>
<StackPanel x:Name="NavHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="StackExButton" Style="{StaticResource NavButton}" Click="StackExButton_Click">EVE Online StackExchange</Button>
<Button x:Name="BugsButton" Style="{StaticResource NavButton}">Bugs & Suggestions</Button>
</StackPanel>
I intend to move some of the properties into styles, however it still feels messy.
The above code can also result in the following in small windows:
(source: richard-slater.co.uk)
Is there a better way?
If you don't like nesting panels, a Grid might be a better option. With your four elements, have a five column grid like this:
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image x:Name="LogoImage"
Height="50"
Width="50"
Source="/EVEMonPivot;component/EVEMonLogoBlue.png"
Grid.Column="0" />
<TextBlock x:Name="TitleText"
Height="50"
Text="EVEMon Pivot"
FontSize="40"
Grid.Column="1"
Grid.Row="0"
VerticalAlignment="Center"
FontWeight="Bold"
Padding="10,0,0,0" />
<Button x:Name="StackExButton"
Grid.Column="4"
Style="{StaticResource NavButton}"
Click="StackExButton_Click">EVE Online StackExchange</Button>
<Button x:Name="BugsButton"
Grid.Column="5"
Style="{StaticResource NavButton}">Bugs & Suggestions</Button>
</Grid>
This sets four columns to Auto-size, so they adjust to the size of your UI elements, and the centre column is Star-sized so it fills the rest of the space between them.
While you can use a star-sized grid column to enforce a collapsible region between the controls, you're still left to account for what happens when there simply isn't enough room (eg. 600 pixels of display in a 400-pixel wide area.) What I think you need is a ScrollViewer, which is a ContentControl that lets you determine when scroll bars appear.
In the markup below I am doing 2 things: First, I am using the Silverlight toolkit's DockPanel to isolate the left and right sections of the display (a very similar thing can be accomplished with a 3-column Grid with Cols 0 and 2 set to "Auto" and Col 1 set to "*", but the specific use of Left and Right in the DockPanel may make the intent more readable.) Second, the whole thing is being wrapped in a ScrollViewer with the HorizontalScrollBarVisibility set to "Auto" - when the contents is too big to fit, put up a scrollbar.
<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="SilverlightApplication2.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:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<toolkit:DockPanel >
<StackPanel toolkit:DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Top" Height="50" Margin="5">
<TextBlock Text="Some long text" FontSize="30"/>
</StackPanel>
<StackPanel toolkit:DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" Height="50" Margin="5">
<Button Content="First Button" Margin="5"/>
<Button Content="Second Button" Margin="5"/>
</StackPanel>
</toolkit:DockPanel>
</ScrollViewer>
<TextBlock Grid.Row="1" Text="Body Content (DataGrid, etc.)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>