<StackPanel Grid.Row="0" Height="Auto" Width="Auto">
<Label Name="Label1" BorderThickness="2,2,2,2" BorderBrush="Gray" HorizontalContentAlignment="Center" Width="Auto" Height="28">Window1</Label>
<ListView BorderThickness="2,0,2,0" BorderBrush="Gray"Height="Auto" Width="Auto" />
</StackPanel>
In the XAML above , I want to dock the ListView on the StackPanel. I want the ListView to take the entire client area of the StackPanel after the Label.
What am I doing wrong ?
Why not use a DockPanel instead
<DockPanel Grid.Row="0" Height="Auto" Width="Auto">
<Label DockPanel.Dock="Left" Name="Label1" BorderThickness="2,2,2,2" BorderBrush="Gray" HorizontalContentAlignment="Center" Width="Auto" Height="28">Window1</Label>
<ListView BorderThickness="2,0,2,0" BorderBrush="Gray" Height="Auto" Width="Auto" />
</DockPanel>
Related
I'm new with WPF controls, before I worked with WinForms applications, and there if I put anchor on control and put dock on container all works smoothly but here I have struggle where I mistake?
<Window x:Class="ChatApp.Client.ClientWindow"
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:ChatApp.Client"
mc:Ignorable="d"
Title="Client" Height="450" Width="800">
<Grid>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<GroupBox Header="Client" Height="Auto">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5, 0, 5, 0">Address:</TextBlock>
<TextBox x:Name="txtAddress" Width="80"></TextBox>
<TextBlock Margin="10, 0, 5, 0">Port:</TextBlock>
<TextBox x:Name="txtPort" Width="80"></TextBox>
<Button x:Name="btnConnect" Margin="430, 0, 5, 0" Content="Connect" Width="80" Click="btnConnect_Click"/>
</StackPanel>
</GroupBox>
</StackPanel>
<StackPanel DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<GroupBox Header="Chat" Width="650" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBox x:Name="txtConversation" AcceptsReturn="True"></TextBox>
</GroupBox>
</StackPanel>
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<GroupBox Header="Users" Width="135" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox x:Name="lbUsers" Height="Auto" Margin="5,0" VerticalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
</StackPanel>
</DockPanel>
</Grid>
</Window>
I have three group box top dock, second left dock and last one is for right dock.
When I want to resize form with mouse right group box doesn't want to stretch when
I resize form.
Your layout seems very over complicated - are you just trying to clone what you did in Winforms in WPF?
It doesn't make any sense to have StackPanels or a Grid with only one child control each.
Try replacing your DockPanel with appropriately sized Grid Rows and Columns.
The GroupBoxes won't resize if you hard code their widths.
There's no need to define an ItemTemplate for the ListBox just to display a single string.
Something like the following would be a good starting point for your layout.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="*" MinWidth="135" />
</Grid.ColumnDefinitions>
<GroupBox Header="Client" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="5">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Address:"/>
<TextBox x:Name="txtAddress" Width="80" Grid.Row="1" Grid.Column="0" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Port:" />
<TextBox x:Name="txtPort" Width="80" Grid.Row="3" Grid.Column="0" />
<Button x:Name="btnConnect" Grid.Row="0" Grid.Column="2" Content="Connect" Width="80" />
</Grid>
</GroupBox>
<GroupBox Header="Chat" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBox x:Name="txtConversation" AcceptsReturn="True" />
</GroupBox>
<GroupBox Header="Users" Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox x:Name="lbUsers" />
</GroupBox>
</Grid>
I have a ScrollViewer which contains a Grid having two rows of height '*'
<ScrollViewer>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0"
Header="XYZ"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0,10,0,0"
Width="Auto" MinWidth="160"
BorderThickness="0"
Style="{StaticResource MyGroupBoxStyle}">
<ListBox Name="lstMentorGroups" IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Path=MyCollection}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Style="{StaticResource MyListBoxStyle}">
<ListBox.ItemTemplate>
<DataTemplate >
<TextBlock Text="{Binding Path=Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
<GroupBox Grid.Row="1" Grid.Column="0" MinWidth="160"
Header="ABC" Margin="0,10,0,0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderThickness="0"
Style="{StaticResource MyGroupBoxStyle}">
<ListBox ItemsSource="{Binding Path=List1, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Style="{StaticResource MyListBoxStyle}" Margin="0,0,5,0">
<ListBox.ItemTemplate>
<DataTemplate >
<TextBlock Text="{Binding Path=Prop1}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
</Grid>
</ScrollViewer>
But at run time 1st Group box gets full height needed by its containing listbox that means it overrides Grid height * to auto
It works fine if I don't use scrollviewer it gives 50-50% height to each groupbox.
You need set the Height of the Grid if it's in the ScrollViewer, otherwise the Grid will have as much Height as it need, which means the ListBox in the Grid will get unlimited Height to display its items.
To ensure that the both rows takes the same height you should use the SharedSizeGroupe
So what you should do is:
<ScrollViewer>
<Grid HorizontalAlignment="Stretch" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="A" />
<RowDefinition SharedSizeGroup="A" />
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0"
Header="XYZ"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0,10,0,0"
Width="Auto" MinWidth="160"
BorderThickness="0"
Style="{StaticResource MyGroupBoxStyle}">
<ListBox Name="lstMentorGroups" IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Path=MyCollection}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Style="{StaticResource MyListBoxStyle}">
<ListBox.ItemTemplate>
<DataTemplate >
<TextBlock Text="{Binding Path=Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
<GroupBox Grid.Row="1" Grid.Column="0" MinWidth="160"
Header="ABC" Margin="0,10,0,0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderThickness="0"
Style="{StaticResource MyGroupBoxStyle}">
<ListBox ItemsSource="{Binding Path=List1, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Style="{StaticResource MyListBoxStyle}" Margin="0,0,5,0">
<ListBox.ItemTemplate>
<DataTemplate >
<TextBlock Text="{Binding Path=Prop1}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
</Grid>
As Grid is placed in ScrollViewer so it takes whole space how much it's controls requires. And I don't want to show vertical scroll bar.
I just set Grid MaxHeight to ScrollViewer ActualHeight
MaxHeight="{Binding ElementName=ScrollViewer, Path=ActualHeight}"
I want to create a status bar with combobox, progress bar and two buttons. At the left it must be progressbar, in the center combobox, that get all available free space and two buttons at the right But I get very little combobox, and dockpanel don't fill status bar..
My Xaml code
<StatusBar DockPanel.Dock="Bottom" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<DockPanel Width="1004" Height="Auto" LastChildFill="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ProgressBar Name="ExecutionProgress" Height="Auto" Margin="3" MinWidth="200" MaxWidth="400" DockPanel.Dock="Left"></ProgressBar>
<StackPanel Orientation="Horizontal" Height="Auto" DockPanel.Dock="Right">
<Button Name="SaveExecutionLog" Width="Auto" Height="Auto" Content="Save Log" Margin="2" Padding="4"></Button>
<Button Name="ClearExecutionLog" Width="Auto" Height="Auto" Content="Clear Log" Margin="2" Padding="4"></Button>
</StackPanel>
<ComboBox Name="ExecutionEvents" Height="Auto" Width="Auto" Margin="3">
<ComboBoxItem>jfjfjxdfvbdfhfghfghfghfghfghjfg[pjkhlp'fghfg]ophkfg]pkh]pfg]hkfg]pkh]pfghokfg]pkh]-fg</ComboBoxItem>
</ComboBox>
</DockPanel>
</StatusBar>
Where is my mistake? Thank you!
I don't know where was the problem, but i fixed it by changing DockPanel to Grid. It was a magic.
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.
Notice how the textbox expands to the right until it has enough horizontal space to fit the content? Well I'd like it to not expand and fit the text with the space it has in the window.
If the windows expands, then the Grid.Column it's in will expand, but the textbox itself should expand to fit. Simple enough?
Any suggestions? This is my first foray into WPF and so far it's been pretty sleek.
Edit: Here's my XAML markup:
<Window x:Class="GameLenseWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.15*" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" />
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="Platform"
Foreground="White"
FontFamily="Georgia"
FontSize="15"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<ComboBox x:Name="cmbPlatform"
Margin="10"
FontFamily="Georgia"
FontSize="15"
MinHeight="30"
MinWidth="140"
VerticalAlignment="Center"
VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged">
<ComboBoxItem>All Platforms</ComboBoxItem>
<ComboBoxItem>Playstation 3</ComboBoxItem>
<ComboBoxItem>XBox 360</ComboBoxItem>
<ComboBoxItem>Wii</ComboBoxItem>
<ComboBoxItem>PSP</ComboBoxItem>
<ComboBoxItem>DS</ComboBoxItem>
</ComboBox>
</StackPanel>
<Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png"
Height="16" HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0 0 10 0" />
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding ImageUrl}" Stretch="Fill"/>
</Border>
<StackPanel Grid.Row="0" Grid.Column="1" Margin="12 0 0 0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title:" FontFamily="Arial" Foreground="White"/>
<TextBlock Text="{Binding Title}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Release Date:" FontFamily="Arial" Foreground="White" />
<TextBlock Text="{Binding ReleaseDate}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<TextBlock Text="Synopsis" FontFamily="Arial" Foreground="White" />
<TextBox Background="#454545" Text="{Binding Synopsis}" MinHeight="76" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
To get a TextBox to wrap inside a ListBox you can make the following changes:
Set the content of the listbox equal to the width of the listbox using: HorizontalContentAlignment="Stretch".
Disable the horizontal scrollbar of the listbox to prevent listbox from getting the desired size of the controls and preventing the word wrap in your textbox.
Set TextWrapping="Wrap" in the TextBox
Here is the XAML:
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch" >
</ListBox>
<TextBox Text="{Binding Synopsis}" MinHeight="76" TextWrapping="Wrap" />
I believe you need to set the Margin property of your textbox control. In the designer, you can see little circles around each textbox (and each control when you focus them, for that matter). Click the little circle on the right side of the textbox, to make that control grow marginally with the available space in the current layout control (by clicking the circle, the margin will be added into the XAML).
I don't know if in your image you've already adjusted the window size, but with that image it appears you'll also need to set the width for your textbox.
Does this help?