I have an issue im struggling a day now. Im trying to center some controls into a Grid layout. I have 2 columns and i want half of the controls centered ad the 1st column and other half to the second column
When the window resize some of them get "eaten" on the edges , and i wasent able to identify the issue
Can anyone spot the issue?
<Grid Margin="0,2,0,-2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//.......
<ComboBox x:Name="optMenuLeft" Margin="0,271,0,0" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170" Grid.RowSpan="2" />
<Label Content="Menu" Margin="141,271,390,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" HorizontalAlignment="Center" Width="69" Grid.RowSpan="2" />
<ComboBox x:Name="optBedOccupancyLeft" VerticalAlignment="Top" Height="26" Grid.RowSpan="2" HorizontalAlignment="Center" Width="170" Margin="0,240,0,0"/>
<Label Content="Bed Occupancy" Margin="0,240,270,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" Grid.RowSpan="2" HorizontalAlignment="Center" Width="94"/>
//.......
<ComboBox Name="optMenuRight" Margin="255,271,175,0" Grid.Column="1" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170"/>
<Label Content="Menu" Margin="176,271,353,0" Grid.Column="1" VerticalAlignment="Top" HorizontalContentAlignment="Right" HorizontalAlignment="Center" Width="71"/>
<ComboBox Name="optBedOccupancyRight" Margin="255,240,175,0" Grid.Column="1" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170" Grid.RowSpan="2"/>
<Label Content="Bed Occupancy" Grid.Column="1" Margin="0,240,200,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" Grid.RowSpan="2" HorizontalAlignment="Center" Width="94"/>
//.....
The simplest way is to use grids inside grid. The outer grid will split the window into two columns. The inner grids will split the columns into four cells (2x2). Just center the inner grids and it will work like a charm.
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="LeftColumn" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Bed Occupancy" />
<ComboBox x:Name="optBedOccupancyLeft" Grid.Column="1" />
<Label Content="Menu" Grid.Row="1"/>
<ComboBox x:Name="optMenuLeft" Grid.Column="1" Grid.Row="1" />
</Grid>
<Grid x:Name="RightColumn" VerticalAlignment="Center" HorizontalAlignment="Center>
<!-- the same as left column -->
</Grid>
</Grid>
Btw, notice, that when you want split some are to equal columns (or rows or both), you can use UniformGrid:
<UniformGrid x:Name="LayoutRoot" Rows="1">
<Grid x:Name="LeftColumn" />
<Grid x:Name="RightColumn" />
</UniformGrid>
There is also more advanced approach that I often use:
Use UniformGrid to define columns. The xaml is smaller and cleaner.
Use HeaderedContentControl to define labels and inputs
Use Grid's SharedSizeScope feature, to make width of label equal: https://msdn.microsoft.com/en-us/library/system.windows.controls.grid.issharedsizescope%28v=vs.110%29.aspx
<UniformGrid x:Name="LayoutRoot" Rows="1">
<StackPanel x:Name="LeftColumn" Grid.IsSharedSizeScope="True"
HorizontalAlignment="Center" VerticalAlignment="Center">
<HeaderedContentControl Header="Bed Occupancy" Style="{StaticResource LabelValueContentControl}">
<ComboBox x:Name="optBedOccupancyLeft" />
</HeaderedContentControl>
<HeaderedContentControl Header="Menu" Style="{StaticResource LabelValueContentControl}" >
<ComboBox x:Name="optMenuLeft" />
</HeaderedContentControl>
</StackPanel>
<StackPanel x:Name="RightColumn" Grid.IsSharedSizeScope="True">
<!-- the same as left column -->
</StackPanel>
</UniformGrid>
The LabelCalueControlStyle is take advantage of shared column size
<Style x:Key="LabelValueContentControl" TargetType="HeaderedContentControl">
<Setter Property="Padding" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HeaderedContentControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="LabelValueContentControl.Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter ContentSource="Header"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Right" />
<ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I'm new in WPF and I try to creat specific UserControl to display data for a single product. I used Grid inside UserControl. So I create 5 columns and 3 rows. I want ot make 4 columns fixed (image, green-clored, blue-colored and column with controls) and last column (orange-colored) to fill all availabel space. Here my XAML and few screenshots:
<Grid Margin="0,0,0,5" Background="#FFDCD9D9" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Source="{Binding ItemThumbnailUrl}" Stretch="None" HorizontalAlignment="Right" Margin="5,0" />
<StackPanel Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Background="#FFDA6F6F">
<Label BorderThickness="0" Content="dsgsdgsgsgsdgsdg sd " FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Background="#FF517823" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding ItemPrice}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="грн." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" Background="#FF214299" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding Quantity}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="шт." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Background="#FF88B91E" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="грн." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="2" Orientation="Horizontal" Background="#FF228CBD" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="шт." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<CheckBox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Column="3" Grid.Row="2" Background="{x:Null}" Content="Редакт." Foreground="#FF444343" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" Background="#FFE08212" HorizontalContentAlignment="Stretch" />
</Grid>
If I have "Title" text (in red-colored cell) less than sum of 3 my fixed columns, everything is OK, but if a text larger I have problems with some paddings between columns (please see pictures)
So how can I resolve this problem?
I could reproduce your issue in a variety of cases when a Grid is used in a DataTemplate. I removed the StackPanel and used a TextBlock, then a a TextBlock hosted in a separate Grid, but all with the same result. I guess something is going wrong when WPF is determining the required size. I have often occurred this kind of strange behaviour in Grids (when part of an ItemTemplate). If you need a quick workaround then this should do the trick
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" MaxWidth="80" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I want to set 2 colors to my grid rows, the even ones will have one color and the others will have another.
I dont know ho to even start of doing it.
<ListBox
ItemsSource="{Binding}" x:Name="station_list"
HorizontalAlignment="Left" Height="378" Margin="10,31,0,0"
VerticalAlignment="Top" Width="570" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="Stations_Template">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name: " />
<TextBlock Grid.Column="1" Text="{Binding Path=sname}" />
<TextBlock Grid.Column="2" Text="Last Name: " />
<TextBlock Grid.Column="3" Text="{Binding Path=mahoz}" />
<CheckBox Grid.Column="4" Content="Is Active?"
IsEnabled="False"
IsChecked="{Binding Path=isactive}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use Rectangles to fill the rows first, then add data to them.
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="AliceBlue" />
<TextBlock Grid.Row="0" Text="Row 1" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="1" Fill="AntiqueWhite" />
<TextBlock Grid.Row="1" Text="Row 2" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="2" Fill="AliceBlue" />
<TextBlock Grid.Row="2" Text="Row 3" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="3" Fill="AntiqueWhite" />
<TextBlock Grid.Row="3" Text="Row 4" HorizontalAlignment="Center"/>
</Grid>
Edit:
If you're loading an unknown amount of items, then i think you need something like an itemscontrol to load them in. You can then use the alternationcount and triggers to handle the alternating color.
<ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="FooBar" Margin="0,0,0,10">
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Blue" TargetName="FooBar"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Red" TargetName="FooBar"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Window x:Class="WpfApplication3.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>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Cyan" />
<Border Grid.Row="2" Grid.Column="1" Background="Red" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="2" Background="Orange" />
<Border Grid.Row="0" Grid.Column="1" Background="Green" />
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Window>
![enter image description here][1]
[1]: http://i.stack.imgur.com/LX9X8.png
I have following DataTemplate for usage within my phone.LongListSelector in my XAML view:
<DataTemplate x:Name="myLocationsListTemplate">
<StackPanel Margin="0,0,0,15">
<Grid VerticalAlignment="Top" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
<TextBlock Grid.Column="1" Text="vor 10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
<Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
<Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
<Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
</Grid>
</StackPanel>
</DataTemplate>
Now I want the complete DataTemplate Content made "clickable". Means: If user clicks on a TextBlock or one of the four Images or on whatever displayed in die List, an action should be performed with a databound property (saying the Name from the bound data should be given).
Any ideas how to get this working?
Why don't you just stick your entire template into a button? You can style the button if needs be to remove any default appearance you don't like. eg.
<Style x:Key="BlankButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
</Style>
I have a databound list box and a text block in my application
Initially the listbox will be populated with some values (More than 10 values). i tried to scroll the list. But I couldn't. When I Click on the list and drag the mouse up, the list goes further down. The effect is more or like pulling down the list.
The xaml code is as follows. please help.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ScrollViewer Grid.Row="1">
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
Thank you.
Your ScrollViewer is currently wrapped around only the ListBox. Bearing in mind the ListBox has its own ScrollViewer this will result in unpredictable behaviour.
I would wrap your Grid with a ScrollViewer and disable the ListBox one so that you can scroll your TextBlock and ListBox smoothly.
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ScrollViewer>
I achieved what i wanted. I didn't even need to include the scroll viewer. I just needed to change the row definition of the grid (row of the list box) from 'auto' to '*'. That worked as expected.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="RequestFilterTxtBlock" Grid.Row="0" Text="-" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>
<ListBox x:Name="Requests1" ItemsSource="{Binding Details_OC}" SelectionChanged="Requests_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,2" BorderBrush="White">
<Grid HorizontalAlignment="Stretch" Width="450">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<CheckBox x:Name="CheckBox1" Grid.Column="0" IsChecked="{Binding Path=IsComplete, Mode=TwoWay}" Grid.RowSpan="2" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
<TextBlock x:Name="WorkOrderID" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" Text="{Binding WORKORDERID}" VerticalAlignment="Top"/>
<TextBlock x:Name="date" Text="{Binding Path=DUEBYTIME}" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I have a DockPanel with two Grids (DockPanel.Dock="Right/Left"). In the left i have a TreeView and in the right i have some TextBoxes. If i resize my window the panels resize proportinal.
My problem is, if i write long text in a TextBox the TextBox enlarge and hide my left DockPanel instead of a break the text.
I have set minwidth of the left DockPanel to '300' and set TextWrapping in the TextBoxes to 'wrap' but nothing helps.
Source:
<Grid Background="#FF58ACFC" Name="main">
<DockPanel>
<Grid DockPanel.Dock="Right" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
<RowDefinition Height="60" />
<RowDefinition Height="26"/>
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Titel:" Grid.Row="0"/>
<TextBox Grid.Row="1" IsReadOnly="False">
<Label Content="Frage:" Grid.Row="2"/>
<TextBox Grid.Row="3" TextWrapping="Wrap" IsReadOnly="False" AcceptsReturn="True">
<Label Content="Antwort:" Grid.Row="4"/>
<TextBox Grid.Row="5" IsReadOnly="False" TextWrapping="Wrap" />
</Grid>
<Grid DockPanel.Dock="Left" Margin="5,0,0,0">
<DockPanel>
<Grid DockPanel.Dock="Left">
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="26">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Kategorie" Grid.Column="0"/>
<Button Grid.Column="1" BorderThickness="0" HorizontalAlignment="Right">
</Grid>
<TreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"Padding="0,0,15,0" />
</DockPanel>
</Grid>
<Grid DockPanel.Dock="Right">
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="26">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Lernkarten" Grid.Column="0"/>
<Button Grid.Column="1" Width="26" Click="ButtonAddItem_Click">
</Grid>
<ListView />
</DockPanel>
</Grid>
</DockPanel>
</Grid>
</DockPanel>
</Grid>
That's pretty much why Dockpanels are useless :-)
I suggest using Grid..