I need to adjust the position of a button inside a grid which has a stack panel inside a srollviewer, such a way that whenever the scroll bar appears it should be at the end and when ScrollBar is not available it should be next to the last item.
With Horizontal Scroll Bar , as expected but in
Without Horizontal scroll Bar there is a gap between button and last textbox. How can I get rid of this gap without affecting the [With Horizontal Scroll Bar] behaviour.
Here is the code snippet used :
<Window x:Class="WpfApp2.MainWindow"
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:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<StackPanel Orientation="Horizontal">
<TextBox Text="TextBox1" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox2" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox3" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox4" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox5" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
</StackPanel>
</ScrollViewer>
<Button Content="Button" Grid.Column="2"/>
</Grid>
</Window>
To achieve what you want (sticky behavior). Just make a few changes in XAML like this.
<Grid x:Name="ParentGrid">
<Grid Grid.Column="0" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBox Text="TextBox1" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox2" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox3" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox4" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox5" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
<TextBox Text="TextBox6" VerticalContentAlignment="Center"></TextBox>
</StackPanel>
</ScrollViewer>
<Button Content="Button" Grid.Column="1" HorizontalAlignment="Left"/>
</Grid>
</Grid>
It works completely fine.
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 am working on small wpf application and I can say this is my first wpf application
from the beginning.
I have problem here because I want to glue two labels together (see image below), because when I run app on smaller or bigger monitor they will be too much away from each other, and what I Want to do is to keep them together all the time and verticaly centered, so thats reason why I created grid and why I put stack panel inside, so maybe I could apply verticalalignment = 'center' to stack panel and content would be centered or whatever?
I am not sure is this code ok, so please guys comment it, I want to improve my skills about
WPF, so be free to tell me another solutions or whatever, maybe I wrote too much code or smth?
Anyway, how could I glue up this two labes to keep them near each other all the time and to keep them also centered all the time on different size of monitors.
Thanks a lot guys,
Cheers!
MY CODE:
<Window x:Class="xTouchPOS.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None">
<Grid>
<!-- Definition of my Grid which contains 2 columns and 3 rows. -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3.5*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="65"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.143*" />
</Grid.RowDefinitions>
<!-- Added this rectangle to colour header of my Grid. -->
<Rectangle Grid.ColumnSpan="3">
<Rectangle.Fill>
<SolidColorBrush Color="#0091EA"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<!-- Added this grid and stackpanel inside this grid to place date and time, but how to glue them together text and value -->
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
<Label x:Name="lblTimeText" Content="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<Label x:Name="lblTime" Content="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical">
<Label Name="lblDateText" Content="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
<Label Name="lblDate" Content="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
</Grid>
</Grid>
</Window>
CODE BEHIND:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
lblDate.Content = DateTime.Now.Date.ToString("MM/dd/yyyy");
lblTime.Content = DateTime.Now.ToString("HH:mm:ss");
}
}
If you change your Labels to TextBlocks, I think you will get what you are looking for. You will need to change the column definition.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<!-- Definition of my Grid which contains 2 columns and 3 rows. -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="65"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.143*" />
</Grid.RowDefinitions>
<!-- Added this rectangle to colour header of my Grid. -->
<Rectangle Grid.ColumnSpan="3">
<Rectangle.Fill>
<SolidColorBrush Color="#0091EA"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<!-- Added this grid and stackpanel inside this grid to place date and time, but how to glue them together text and value -->
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center">
<TextBlock x:Name="lblTimeText" Text="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<TextBlock x:Name="lblTime" Text="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Name="lblDateText" Text="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
<TextBlock Name="lblDate" Text="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
</Grid>
</Grid>
</Window>
Alternative
If you want to slim down your XAML, this will give the same result. It will also lock the two stack panels to the top right. Replace your Second Grid with this block
<DockPanel Grid.Row="0" Grid.ColumnSpan="2">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Right" Margin="5,0">
<TextBlock Name="lblDateText" Text="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
<TextBlock Name="lblDate" Text="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Right" Margin="5,0">
<TextBlock x:Name="lblTimeText" Text="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<TextBlock x:Name="lblTime" Text="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
</DockPanel>
Add other stackPanel with Orientation="Horizontal"
<StackPanel Grid.Column="0" Orientation="Horizontal" >
<StackPanel Orientation="Vertical">
<Label x:Name="lblTimeText" Content="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
<Label x:Name="lblTime" Content="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
<StackPanel Orientation="Vertical">
<Label Name="lblDateText" Content="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
<Label Name="lblDate" Content="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" />
</StackPanel>
Other solution:you can use run
<TextBlock Grid.Column="1">
<TextBlock TextWrapping="Wrap" >
<Run x:Name="lblTimeText" />
<Run x:Name="lblTime"/>
</TextBlock>
</TextBlock>
I am trying to set the tab index to follow against the order of visual appearance. Meaning the buttons that appears at the top of the window gets focused first when I specifically set it not to.
Here's how the controls are structured;
DocPanel
|
|---- DockPanel
| |----- Button
| |----- Button
| |----- Button
|
|---- Grid
|----- Canvas
|---- TabControl
|------ TextBox
|------ ComboBox
The Tab Order I want;
Canvas
TextBox
ComboBox
3 buttons
Currently order is;
3 buttons
TextBox,
ComboBox
Canvas.
I tried setting KeyboardNavigation.TabNavigation="Local" for the outer DockPanel.
Then I set TabNavigation.TabIndex and TabIndex to the number that I want but that's not working.
If controls appear visually at the top of windows, is it not possible to change the tab index to focus after the controls appearing at the bottom?
Here's my XAML:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FocusManager.FocusedElement="{Binding ElementName=pic}"
Title="Window1" Height="504" Width="929">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" KeyboardNavigation.TabNavigation="Local">
<DockPanel DockPanel.Dock="Top" Height="30">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Save and Close" KeyboardNavigation.TabIndex="4" TabIndex="4"/>
<Button Content="Forward" KeyboardNavigation.TabIndex="5" TabIndex="5" />
<Button Content="Delete" KeyboardNavigation.TabIndex="6" TabIndex="6" />
</StackPanel>
</DockPanel>
<Grid DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50"/>
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Aqua" BorderThickness="2" >
<Canvas x:Name="pic" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1" KeyboardNavigation.IsTabStop="True" Focusable="True" >
<Canvas.Background>
<ImageBrush ImageSource="bookcover.jpg" Stretch="Fill"/>
</Canvas.Background>
</Canvas>
</Border>
<TabControl x:Name="tabs" Grid.Column="2" Grid.Row="0">
<TabItem Header="Fax Details" IsTabStop="False">
<StackPanel>
<TextBox Name="fdCustomerFileNumber" HorizontalAlignment="Left" Height="30" KeyboardNavigation.TabIndex="2" TabIndex="2" />
<ComboBox TabIndex="3" KeyboardNavigation.TabIndex="3" Width="165" HorizontalAlignment="Left" Height="22" VerticalAlignment="Center" Name="fdDocType" IsEditable="False" />
</StackPanel>
</TabItem>
</TabControl>
</Grid>
</DockPanel>
You can set your XAML to;
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FocusManager.FocusedElement="{Binding ElementName=pic}"
Title="Window1" Height="504" Width="929">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<DockPanel DockPanel.Dock="Top" Height="30">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Save and Close" TabIndex="4"/>
<Button Content="Forward" TabIndex="5" />
<Button Content="Delete" TabIndex="6" />
</StackPanel>
</DockPanel>
<Grid DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50"/>
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Aqua" BorderThickness="2" >
<Canvas x:Name="pic" Grid.Column="0" Grid.Row="0" Focusable="True" >
<Canvas.Background>
<ImageBrush ImageSource="bookcover.jpg" Stretch="Fill"/>
</Canvas.Background>
</Canvas>
</Border>
<TabControl x:Name="tabs" Grid.Column="2" Grid.Row="0">
<TabItem Header="Fax Details" IsTabStop="False">
<StackPanel>
<TextBox Name="fdCustomerFileNumber" HorizontalAlignment="Left" Height="30" TabIndex="2" />
<ComboBox TabIndex="3" Width="165" HorizontalAlignment="Left" Height="22" VerticalAlignment="Center" Name="fdDocType" IsEditable="False" />
</StackPanel>
</TabItem>
</TabControl>
</Grid>
</DockPanel>
</Window>
Then in your code behind, in the New Sub, simply set the focus to the Canvas;
pic.Focus;
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?
I have listbox that displays information about list of objects:
<ListBox Grid.Column="0" Height="152" Name="CustomersList" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name, Mode=OneWay}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I would show more detailed information about selected item in another block, but I don't know (and can't find) how to bind selected item to those block data context. I guess it should be something like this:
<Grid Grid.Column="1" DataContext="{Binding Path=ItemSelected, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Id" VerticalAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=Id}" VerticalAlignment="Center"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Name" VerticalAlignment="Center"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=Name}" VerticalAlignment="Center"/>
<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="Add new" />
<Button Content="Store changes" />
</StackPanel>
</Grid>
But the problem is that data item to be binded to the grid is not specified anywhere and I don't know how to do that.
Any suggestion would be wellcome.
Thanks!
P.S. I've tried to specify CustomersList.ItemsSource as DataContext for the Grid - this didn't give any result.
You can bind to the SelectedItem property of the ListBox, one way is using ElementName.
<Grid DataContext="{Binding ElementName=CustomersList, Path=SelectedItem}"> </Grid>