WPF Layout Control - wpf

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>

Related

How to center/stretch textbox or stackpanel inside dockpanel?

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.

How to Scroll textbox automatically in Scrollviewer when press left/right arrow keys?

I am wrapping the textbox with scrollerviewer. The problem is when there is enough text to scroll horizontally, and we use the left/right arrow to move through text, the cursor moves beyond the display area, but it doesn't auto scroll the content.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<TextBox x:Name="Text1" AcceptsReturn="True" MinWidth="150" MinHeight="150"/>
</ScrollViewer>
</Grid>
Any expert here?
Dont wrap your TextBox with a ScrollViewer. TextBox has already scrolling-support.
Do the following with your TextBox:
<TextBox x:Name="Text1" Grid.Row="1" AcceptsReturn="True" MinWidth="150" MinHeight="150" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto" />
Here an Example, that shows the difference:
<Grid Width="100" Height="300">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,20,0,0">
<TextBox x:Name="Text2" AcceptsReturn="True" MinWidth="150" MinHeight="150"/>
</ScrollViewer>
<TextBox x:Name="Text1" Grid.Row="1" AcceptsReturn="True" MinWidth="150" MinHeight="150" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto" />
</Grid>
Hope this helps!

How to organize elements inside a Button

i'm new to wpf .
i got a wpf button ,
in it i need to place 2 elements a textblock and a viewbox encapsulating a canvas
the problem is i can't seem to see the canvas at all , unless i give it static values for its size
<Button Margin="10,30,10,10" Padding="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Viewbox Margin="0,0,0,5">
<Canvas Background="red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1" >
<Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Black" StrokeThickness="4" ></Ellipse>
</Canvas>
</Viewbox>
</Grid>
</Button>
iv'e also attempted this using a stack panel with an horizontal orintation
in any case the canvas does not show
any thoughts of what i'm doing wrong ?
thanks.
Attached Grid properties only work when at the Grid-child-level, i.e. the properties set on the canvas do not take effect they should be set on the container, the ViewBox which is a direct child of the Grid.
Viewboxes only work if the content has a concrete size, you probably need neither the ViewBox nor the Canvas. If you want the Ellipse to be a circle set Stretch="Uniform"
The contents of Buttons do not stretch by default you should set HorizontalContentAligment and its vertical counterpart to Stretch.
e.g.
<Button Margin="10,30,10,10" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Ellipse Stretch="Uniform" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="Black" StrokeThickness="4"></Ellipse>
</Grid>
</Button>

Make ComboBox stretch to available space with maxwidth and right-aligned parent

I'm having a problem achieving the layout i want.
This is my code:
<DockPanel DockPanel.Dock="Bottom" HorizontalAlignment="Right" LastChildFill="True">
<Label DockPanel.Dock="Left" Content="Add new:"/>
<Button DockPanel.Dock="Right" Content="Add" VerticalAlignment="Center"/>
<ComboBox VerticalAlignment="Center" MaxWidth="150" HorizontalAlignment="Stretch">
<System:String>Item1</System:String>
<System:String>Item2</System:String>
<System:String>Item3</System:String>
</ComboBox>
</DockPanel>
What I want is to have the three elements aligned to the right, in the order Label, ComboBox, Button. The Label and the button should take as much space as needed, but I want the ComboBox to take as much space as possible up to 150 px.
It kind of works when the DockPanel is not set to HorizontalAlignment=Right.
Any tips/solutions?
Thanks.
Use the RightToLeft setting, like this:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid FlowDirection="RightToLeft">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MaxWidth="150"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label FlowDirection="LeftToRight" Grid.Column="2" Content="Add new:"/>
<ComboBox FlowDirection="LeftToRight" Grid.Column="1" VerticalAlignment="Center" MaxWidth="150" HorizontalAlignment="Stretch">
<ComboBoxItem>Test</ComboBoxItem>
<ComboBoxItem>Test</ComboBoxItem>
<ComboBoxItem>Test</ComboBoxItem>
</ComboBox>
<Button FlowDirection="LeftToRight" Grid.Column="0" DockPanel.Dock="Right" Content="Add" VerticalAlignment="Center"/>
</Grid>
</Grid>
Here is is running:

Problem with GridSplitter not resizing content

First off I'm new to XAML so forgive me if I've done something stupid.
I have stripped down my page to the following example XAML (viewable in XamlPad):
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
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 ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MinWidth="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<!--<RowDefinition Height="Auto" />-->
<RowDefinition MaxHeight="25" Height="25" MinHeight="25" />
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="4" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<GridSplitter Grid.Row="0" Grid.RowSpan="4" Width="4" />
<Frame >
</Frame>
<GridSplitter Grid.Row="0" Height="4" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<Grid Grid.Column="2" Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Column="2" Grid.Row="3">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ScrollViewer>
</Grid>
</Page>
What I want to happen is for the Horizontal Grid Splitter to resize the top panel, moving the bottom Grid (which I want to keep at 25 height) and Scrollviewer controls down.
I've tried putting the Horizontal grid splitter into it's own Row and this moves the content down but it shrinks the content of the top grid which is not what I'm looking for.
Any suggestions as to waht I'm doing wrong? Is it something to do with the proportional height?
Firstly you have defined the splitter as if they apply to multiple rows and columns, but they actually have to have a row or column of their own and they apply to the adjacent rows/columns, so you were on the right track before.
The problem is the proportional (star) rows. For a splitter to work at least one of the adjacent rows/columns has to be fixed (pixel) sized or it does not adjust with the mouse but by some weird proportional movement instead.
I did not understand your "but it shrinks the content of the top grid which is not what I'm looking for" comment, so it might need some more explaining and I have made some guesses, but the XAML file shown below has the splitter behaving themselves:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="191.5" />
<ColumnDefinition Width="8.5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="194" />
<RowDefinition Height="0.148*"/>
<RowDefinition MaxHeight="25" Height="25" MinHeight="25" />
<RowDefinition Height="0.852*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="4" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2" Margin="0,0,-0.5,0" />
<sdk:GridSplitter Grid.Row="0" Grid.RowSpan="4" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0.5,0,-0.5,0" />
<Frame >
</Frame>
<sdk:GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="3" />
<Grid Grid.Column="2" Grid.Row="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0.5,0,-1,0"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Column="2" Grid.Row="3" Margin="0.5,0,-1,0">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ScrollViewer>
</Grid>
If I understand your problem correctly.
You should be able to take out the VerticalAlignment="Stretch" and HorizontalAlignment="Stretch" from your inner grid and get what you want.
The gridsplitter doesn't like other content in a different row (or col) that has both Allignments set to stretch.

Resources