Last Grid Column Not Auto Resizing With Grid - wpf

I'm having a problem with my TextBoxs not "Auto" resizing. I'm trying to create a form that behaves and looks like the Properties Editor in Visual Studio. What appears to be happening is that the third column is not expanding to fill all of the available remaining space in the grid. Image below is how my form looks on startup.
The width of the textboxs is determined by the MinWidth setting on the third ColumnDefinition statement. Also, the Width is set to "*". With any other setting, the resizing done with the GridSplitter doesn't work correctly.
<StackPanel Orientation="Vertical" VerticalAlignment="Top" x:Name="Stacker" Grid.IsSharedSizeScope="True">
<Expander x:Name="Expand" IsExpanded="True" Header="This is a test of a Second Panel" Width="{Binding Width, ElementName=Stacker}">
<Grid x:Name="EditGrid1" Margin="3" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="50" SharedSizeGroup="SharedSize1" />
<ColumnDefinition Width="Auto" SharedSizeGroup="SharedSize2" />
<ColumnDefinition Width="*" MinWidth="50" x:Name="ValueCol" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" x:Name="ToolBoxSplitter1" Grid.Row="1" Grid.RowSpan="6" Panel.ZIndex="1" HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndNext" Width="3"/>
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="1" Text="{x:Static lex:DoSomeThingView.Name}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="2" Text="{x:Static lex:DoSomeThingView.Address}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="3" Text="{x:Static lex:DoSomeThingView.Zip}" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="4" Text="{x:Static lex:DoSomeThingView.NumberOfDoors}" TextTrimming="CharacterEllipsis" Grid.IsSharedSizeScope="True" />
<TextBlock MaxHeight="40" Grid.Column="0" Grid.Row="5" Text="{x:Static lex:DoSomeThingView.DoubleNumber}" />
<TextBox Grid.Column="2" Grid.Row="1" x:Name="UserName1" MaxHeight="50" TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto" SpellCheck.IsEnabled="True" />
<TextBox Grid.Column="2" Grid.Row="2" x:Name="Address1" />
<TextBox Grid.Column="2" Grid.Row="3" x:Name="Zip1" />
<TextBox Grid.Column="2" Grid.Row="4" x:Name="NumberOfDoors1" />
<TextBox Grid.Column="2" Grid.Row="5" x:Name="DoubleNumber1" />
</Grid>
</Expander>
</StackPanel>
Any suggestions on how to correct this?

Have a check once again of any style being set globally because your layout worked perfectly fine with me.
try overriding your textbox style by a local resource
<StackPanel.Resources>
<Style TargetType="{x:Type TextBox}"/>
</StackPanel.Resources>

Related

Multiple Parallel GridSplitter in WPF

I have divided my entire screen into 3 rows and 2 grid splitters. Currently, my middle row is changing its height when I move my first/second grid splitter.
Expected behaviour:
Basically, the middle row's height should remain the same but should only move as per the change in height of the top/bottom row.
If I move my first grid splitter then my other row should follow it. It means the middle row should move and the last row should increase in height. Similarly, if I move my second grid splitter then middle row should not change its height but should move. Whereas the first row should increase in height.
To understand better, please check my following code.
Can someone please help me, how can I achieve this.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="FirstRow">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TreeView Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" Background="Red"/>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent"/>
<TreeView Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" Background="Green"/>
<GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" />
<TreeView Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" Background="Blue"/>
</Grid>
<GridSplitter x:Name="gridSplitter1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Transparent" Height="5" />
<TextBlock x:Name="SecondRow" Grid.Row="2" Text="SecondRow" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10"/>
<GridSplitter x:Name="gridSplitter2" Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Transparent" Height="5" />
<DataGrid Grid.Row="4" x:Name="ThirdRow">
<DataGrid.Columns>
<DataGridTextColumn Header="Col A" />
<DataGridTextColumn Header="Col B" />
<DataGridTextColumn Header="Col C" />
</DataGrid.Columns>
</DataGrid>
</Grid>
<Button Grid.Row="1" HorizontalAlignment="Left" Content="Delete" Margin="10"/>
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Close" Margin="10"/>
</Grid>

Inner grid present in listview item is not stretching

In my List view I use a grid to arrange the controls of list view item
here is the code
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<!--<Label Width="Auto" HorizontalAlignment="Stretch" Height="3" Background="LightGray"></Label>-->
<Grid HorizontalAlignment="Stretch" MinWidth="220" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65*"/>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontWeight="Bold" Text="{Binding Path=Name}"/>
<TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right" Text="{Binding PlanDate.DateValue,StringFormat=d}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Text="{Binding Owner}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Text="{Binding ForecastDate.DateValue,StringFormat=d}"></TextBlock>
</Grid>
<!--<Label Width="Auto" HorizontalAlignment="Stretch" Height="3" Background="LightGray"></Label>-->
</Border>
</DataTemplate>
</ListView.ItemTemplate>
Here the text blocks in grid coloumn 2 horizontal alignment is set to right .. still the texblocks are not been placed at the right . Am i doing some mistake here? Please advise
Try adding HorizontalContentAlignment="Stretch" to your ListView (the default value is Left and that's why you see it's not stretched).
You can remove HorizontalAlignment="Stretch" MinWidth="220" in your inner Grid.

doesn't wrap the text in the textbox in WPF

Got stuck up with wrap the text when user enters in the text box,used "MaxWidth to control the text box and wrap the text but it shrink the textbox size.am not sure how i have to strecth it,eventhoug am using HorizantalAlignment ="Stretch" but it doesn't match with the other text box.
If i don't wrap the text then the whole grid is moving to if the text is larger than the text box,is this anyway to fix the size and wrap the text please.
Here is my xaml code
<DockPanel Grid.Row="1">
<Grid Name="gLeftContent" Grid.Row="0" Background="Transparent" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="30" />
<RowDefinition Height="20"/>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="0"/>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="0" />
<RowDefinition Height="25" />
<!-- Row 14 -->
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<TextBox
Name="tbName"
Text="{Binding SelectedStory.Slug, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"
Width="{Binding ActualWidth, ElementName=tbName}" **//used ActualWidth but it shrinks the text box and doesn't match with the other text box.**
Grid.Column="1"
Grid.Row="5"
TextWrapping="Wrap"
d:LayoutOverrides="Height"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
LostFocus="tbSlug_LostFocus"
>
<TextBox
Name="tbHeadline"
Text="{Binding SelectedStory.Headline, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"
Grid.Column="1"
Grid.Row="6"
TextWrapping="Wrap"
d:LayoutOverrides="Height"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
LostFocus="tbHeadline_LostFocus"
/>
</TextBox>
<ItemsControl
Grid.Column="1"
Grid.Row="14"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
cal:RegionManager.RegionName="{x:Static inf:RegionNames.MetadataGenerateImagesRegion}"/>
</Grid>
</DockPanel>
Thanks in Advance.
Let's start again with a clean answer:
<TextBox Name="tbName"
Text="{Binding SelectedStory.Slug, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"
Width="Auto" Height="Auto"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="2"
TextWrapping="Wrap" AcceptsReturn="True"
LostFocus="tbSlug_LostFocus" >
Please replace it entirely in your code to avoid any omision.
You need to set the RowDefinition Height="Auto" do it can grow to fit additional lines.
Definitely should not be binding width to itself.
Try
<TextBox
Name="tbName"
Text="{Binding SelectedStory.Slug, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"
Grid.Column="1"
Grid.Row="5"
Grid.ColumnSpan="2"
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
LostFocus="tbSlug_LostFocus" />
Try to add to your textbox:
AcceptsReturn="True"
Although your control may present wrapped text, currently it is unable to accept enter keystrokes.

WPF Formatting Issues - Automatically stretching and resizing?

I'm very new to WPF and XAML. I am trying to design a basic data entry form. I have used a stack panel holding four more stack panels to get the layout I want. Perhaps a grid would be better for this, I am not sure.
And here is the XAML code that generates it:
<Window x:Class="Test1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="224" Width="536.762">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto" Orientation="Horizontal">
<StackPanel Height="Auto" Name="stackPanel2" Width="Auto">
<Label Height="Auto" Name="label1" Width="Auto">Patient Name:</Label>
<Label Height="Auto" Name="label2" Width="Auto">Physician:</Label>
<Label Height="Auto" Name="label3" Width="Auto">Insurance:</Label>
<Label Height="Auto" Name="label4" Width="Auto">Therapy Goals:</Label>
</StackPanel>
<StackPanel Height="Auto" Name="stackPanel3" Width="Auto">
<TextBox Height="Auto" Name="textBox1" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox2" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox3" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox4" Width="Auto" Padding="3" Margin="1" />
</StackPanel>
<StackPanel Height="Auto" Name="stackPanel4" Width="Auto">
<Label Height="Auto" Name="label5" Width="Auto">Date:</Label>
<Label Height="Auto" Name="label6" Width="Auto">Patient Phone:</Label>
<Label Height="Auto" Name="label7" Width="Auto">Facility:</Label>
<Label Height="Auto" Name="label8" Width="Auto">Referring Physician:</Label>
</StackPanel>
<StackPanel Height="Auto" Name="stackPanel5" Width="Auto">
<TextBox Height="Auto" Name="textBox5" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox6" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox7" Width="Auto" Padding="3" Margin="1" />
<TextBox Height="Auto" Name="textBox8" Width="Auto" Padding="3" Margin="1" />
</StackPanel>
</StackPanel>
</Window>
What I really want is for the text boxes to stretch equally to fill up the space horizontally. I would also like for the controls in each vertical stackpanel to 'spread out' evenly as the window is resized vertically.
StackPanel always aligns its children against the top or left edge depending upon its orientation. It sounds like what you want is a UniformGrid where your outer StackPanel is. Try this:
<Window>
<UniformGrid Name="stackPanel1" Rows="1">
<StackPanel Name="stackPanel2">
...
</StackPanel>
<StackPanel Name="stackPanel3">
...
</StackPanel>
<StackPanel Name="stackPanel4">
...
</StackPanel>
<StackPanel Name="stackPanel5">
...
</StackPanel>
</UniformGrid>
</Window>
Note that you don't need to set Width=Auto or Height=Auto, this is implied.
But you are right that a Grid is probably better (even though the XAML is ugly) because in this layout configuration your labels could easily get out of alignment with the text boxes. You can try something like this too...
<UniformGrid Rows="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Field 1" />
<TextBox Grid.Row="0" Grid.Column="1" />
<Label Grid.Row="1" Grid.Column="0" Content="Field 2" />
<TextBox Grid.Row="1" Grid.Column="1" />
<Label Grid.Row="2" Grid.Column="0" Content="Field 3" />
<TextBox Grid.Row="2" Grid.Column="1" />
</Grid>
<Grid /> <!-- repeat above -->
<Grid /> <!-- etc... -->
</UniformGrid>
Taking off what Josh said, if you require the controls to fill the space vertically as well, you can define some "space filler" rows to spread out the controls vertically as well. Here's some XAML which demonstrates this (I added margins to push the labels out from the window border).
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5">Patient Name:</Label>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" />
<Label Grid.Column="0" Grid.Row="2" Margin="5">Physician:</Label>
<TextBox Grid.Column="1" Grid.Row="2" Margin="5" />
<Label Grid.Column="0" Grid.Row="4" Margin="5">Insurance:</Label>
<TextBox Grid.Column="1" Grid.Row="4" Margin="5" />
<Label Grid.Column="0" Grid.Row="6" Margin="5">Therapy Goals:</Label>
<TextBox Grid.Column="1" Grid.Row="6" Margin="5" />
<Label Grid.Column="2" Grid.Row="0" Margin="5">Date:</Label>
<TextBox Grid.Column="3" Grid.Row="0" Margin="5" />
<Label Grid.Column="2" Grid.Row="2" Margin="5">Patient Phone:</Label>
<TextBox Grid.Column="3" Grid.Row="2" Margin="5" />
<Label Grid.Column="2" Grid.Row="4" Margin="5">Facility:</Label>
<TextBox Grid.Column="3" Grid.Row="4" Margin="5" />
<Label Grid.Column="2" Grid.Row="6" Margin="5">Referring Physician:</Label>
<TextBox Grid.Column="3" Grid.Row="6" Margin="5" />
</Grid>

WPF Grid Items and Right Aligned Text

I have a WPF form where I'm trying to make a simple input form. Two labels, two textboxes, and a "submit" button. I have the layout pretty good, the only thing that I can't get is for my "Labels" to be right aligned inside their cells. I have tried both TextAlign="Right" and HorizontialAlign="Right", that moves the text ALL the way over, overlaying my textbox, not just moving inside the cell. Below is the XAML for the window.
<Window x:Class="MyWebKeepAliveDesktop.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyWebKeepAlive Desktop - Login" WindowStyle="None" AllowsTransparency="true" Height="200" Width="400" >
<Border Background="#50FFFFFF" CornerRadius="7" BorderBrush="{StaticResource WindowFrameBrush}" BorderThickness="2,0,2,2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="{StaticResource WindowFrameBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="5,5,0,0" Margin="-1,0,-1,0" MouseLeftButtonDown="DragWindow">
<Grid>
<TextBlock Foreground="White" FontWeight="Bold" VerticalAlignment="Center" Margin="10,2,10,2"
Text="MyWebKeepAlive Desktop Login"/>
<Button Content="X" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" FontSize="7"
Width="15" Height="15" Padding="0" Command="ApplicationCommands.Close"/>
</Grid>
</Border>
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" />
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>
</Grid>
</Border>
</Window>
Your grid only has one column as written. It will need two to support your setting of Grid.Column=1 for the text boxes. Thus, you need to add a <ColumnDefinitions> block. With the XAML the way it is now, WPF just throws both controls into the same column, hence the behavior you are seeing.
Here's what I came up with. Just learning WPF myself. As PeterAllenWebb mentioned, your main issue is you are missing the ColumnDefinitions. I also added the TextAlignment="Right" attributes to the two TextBlocks.
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" TextAlignment="Right" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" TextAlignment="Right" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" Grid.Column="1"/>
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>

Resources