I'm just beginning on figuring out what works best for layout/data display in XAML (WPF), and don't have the intuition yet of what controls, etc work well in certain situations.
Nothing needs to be sorted or filtered, columns and rows are static
Would using a datagrid or some combination of stackpanels/listboxes be best?
I see the "tricky" parts as being adding the "skew adjusted" sub-heading and the separating lines between some of the columns, what would be some suggestions to add these?
I would actually use the standard Grid (not the DataGrid). It seems ankward at the beginning but after you learn how to use it, you're gonna use it everywhere! :)
Here is an example to display your data (its not complete but you see the point):
<Grid x:Name="grdData" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" FontSize="14" Padding="10">Annualized Statistics</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1">1Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2">2Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="3">3Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="4">4Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="5">5Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="6">1st Half</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="7">2nd Half</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="8">Incept</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">Return</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">(4.81)</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">(2.25)</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="3">1.01</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="4">4.30</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="5">(0.61)</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="6">(18.75)</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="7">5.06</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="8">(7.48)</TextBlock>
<Rectangle Grid.Column="5" Grid.Row="1" Grid.RowSpan="5" Fill="Black" Width="1" HorizontalAlignment="Right" />
<Rectangle Grid.Column="7" Grid.Row="1" Grid.RowSpan="5" Fill="Black" Width="1" HorizontalAlignment="Right" />
</Grid>
Related
I have a Xaml view where I'm trying to display Textbox inside a grid which is inside an Exander.
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}" <!-- For the test -->
Background="Transparent"
Foreground="{StaticResource ActiveForegroundBrush}"
IsExpanded="False">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<TextBox
Margin="10"
Background="Transparent"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
Foreground="{StaticResource ActiveForegroundBrush}"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="{Binding FormatedParameters, Mode=OneWay}"
TextWrapping="Wrap" />
</StackPanel>
[...]
</Grid>
</Expander>
However, there is a problem with the Textbox which has a anormal height even if my text is just "aa"...
First, I thought that the problem was with the Grid.Row and the Textbox only fit it so I tried to add a StackPanel which doesn't fit the Grid.Row but it doesn't work. It seems that the problem is in the textbox.
With a TextBlock, I don't have this problem but I need the Textbox to display my text.
You can try RichTextBox.
When I want to use TextBox, I have the same problem under a certain height. I solved the problem by using RichTextBox instead of TextBox.
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}" <!-- For the test -->
Background="Transparent"
Foreground="{StaticResource ActiveForegroundBrush}"
IsExpanded="False">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<RichTextBox
Margin="10"
Background="Transparent"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
Foreground="{StaticResource ActiveForegroundBrush}"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="{Binding FormatedParameters, Mode=OneWay}"
TextWrapping="Wrap" />
</StackPanel>
[...]
</Grid>
</Expander>
As others mentioned, I'm a little unsure what you are trying to achieve. I added a couple of horizontal and vertical layouts to your example:
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}"
Background="Yellow" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="200"
IsExpanded="False">
<Grid Margin="10" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<TextBox
Margin="10"
Background="Orange"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="Test Text"
TextWrapping="Wrap"
/>
</StackPanel>
</Grid>
</Expander>
And I get the following:
Closed:
Open:
anybody got an idea why the datepicker shows the content of a nearby label? The label which is displayed is in a different grid. When I delete the Labels text and leave it blank the text of the next label of the grid is displayed and so on.
Cant figure out why this happens. Once im hovering over the datepicker with the mouse it shows the correct watermark.
[EDIT] Sorry, following a part of the code.
<StackPanel Grid.Row="1" Grid.Column="0">
<Grid Margin="10,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Beauftragt durch:"
Grid.Row="0" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="OrderedByEmp"
IsEnabled="False"
Text="{Binding OrderedByEmpName}"
Grid.Row="0" Grid.Column="1"
Width="110" Margin="10,2"
/>
<Label Content="Projekt:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="Project"
MaxLength="10"
Text="{Binding Project}"
Grid.Row="1" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Auftrag:"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="Order" Text="{Binding Commission}"
MaxLength="8"
Grid.Row="2" Grid.Column="1"
Width="110" Margin="0,2"
/>
</Grid>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="1">
<Grid Margin="10,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Erstellt am:"
Grid.Row="0" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="OrderDate" Text="{Binding OrderDate, Mode=TwoWay,StringFormat='{}{0:dd.MM.yyyy}'}"
IsEnabled="False"
Grid.Row="0" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Benötigt bis:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<DatePicker x:Name="ExpectedFinishDate"
Grid.Row="1" Grid.Column="1"
Width="110"></DatePicker>
<Label Content="Abteilung:"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2" />
<ComboBox x:Name="Departments" Grid.Row="2" Grid.Column="1">
<ComboBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Bezeichnung}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1">
<Grid Margin="10,10,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
VerticalAlignment="Center" HorizontalAlignment="Right">
FLAG:
</TextBlock>
<Image Grid.Row="0" Grid.Column="1" Height="20" Source="/Pictures/NotStartetButton.png" />
<Label Content="Fertiggestellt am:"
Grid.Row="1" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="FinishDatetime"
IsEnabled="False"
Grid.Row="1" Grid.Column="1"
Width="110" Margin="0,2"
/>
<Label Content="Fertiggestellt durch"
Grid.Row="2" Grid.Column="0"
Width="110" Margin="10,2"
HorizontalAlignment="Left" />
<TextBox x:Name="FinishedByEmp"
IsEnabled="False"
Grid.Row="2" Grid.Column="1"
Width="110" Margin="0,2"
/>
</Grid>
</StackPanel>
When I put the datepicker to another spot its working correct.
Tried now for hours to figure out why... but cant find the reason.
Thanks for any suggestion!
I've tried to reproduce the problem in another file and realized that the behavior has changed. Stupidly I left the further research on that problem since I've thought it's located anywhere in the related bindings and just went ahead to come back to that later.
But finally I made so many changes that the problem just disappeared.
I have some issues with getting the grid splitter to work properly.
I have placed the GridSplitter between two grids but the problem is that the grid splitter attaches to left grid which is the only one I can move with the splitter. If I move the left grid towards the right grid, the right grid will get smaller but if I move it away from the right grid it will not expand more than its initial size.
How can I place the GridSplitter in such a way that it allows me to adjust the width of the right grid and then reducing the width of the left grid if it is dragged that way.
I did add a SharedSizeGroup to one of the child grids of the right grid but I'm not sure if that is relevant to my problem, removing it didn't solve anything.
I have also tried to play around with the ResizeBehavor of the GridSplitter also without luck.
I hope it makes sense.
XAML:
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0" Grid.Column="0" VerticalContentAlignment="Center" Margin="5"/>
<ComboBox Grid.Row="0" Grid.Column="1" MinWidth="200px"/>
<Label Grid.Column="2" VerticalContentAlignment="Center" Margin="10 5 5 5"/>
<ComboBox Grid.Row="0" Grid.Column="3" IsEditable="True" MinWidth="250px"/>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Grid.Column="0">
<TextBlock/>
</Grid>
<!-- The "Left" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="0">
<WebBrowser></WebBrowser>
</Grid>
<GridSplitter HorizontalAlignment="Stretch" ResizeDirection="Columns" Width="10" Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>
<!-- The "Right" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Panel.ZIndex="2" MinWidth="200" HorizontalAlignment="Right">
<Border BorderBrush="Blue" BorderThickness="1" MinWidth="200" Background="#4C808080" >
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True" />
<Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="1" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True"/>
<ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center" IsReadOnly="True"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
</Grid>
Have a look at this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0"
Grid.Column="0"
VerticalContentAlignment="Center"
Margin="5" />
<ComboBox Grid.Row="0"
Grid.Column="1"
MinWidth="200px" />
<Label Grid.Column="2"
VerticalContentAlignment="Center"
Margin="10 5 5 5" />
<ComboBox Grid.Row="0"
Grid.Column="3"
IsEditable="True"
MinWidth="250px" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
<Grid Grid.Column="0"
Background="Aqua">
</Grid>
<GridSplitter HorizontalAlignment="Stretch"
ResizeDirection="Columns"
Width="10"
Grid.Column="1"
ResizeBehavior="PreviousAndNext" />
<!-- The "Right" Grid -->
<Grid Grid.Column="2"
Panel.ZIndex="2"
MinWidth="200"
Background="Yellow">
<Border BorderBrush="Blue"
BorderThickness="1"
MinWidth="200"
Background="#4C808080">
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="5" />
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<Label Grid.Column="0"
Grid.Row="1"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="1"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<ItemsControl Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
IsReadOnly="True" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="2">
<TextBlock />
</Grid>
</Grid>
I changed the Grid "logic" a bit. As I understand you correct you want the GridSplitter for the middle part. Thats why I put the top and bottom part in extra rows to keep them away from the GridSplitter. I had to remove the HorizontalAlignment="Right" from your right Grid, too. Otherwise it would have not changed it's size.
Just to be sure the GridSplitter is working I removed the WebBrowser and added Background colors to the left and right Grid. You can replace that. Thought maybe it would be helpfull for you to see if it's working like expected.
/edit added width relation
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
This means when you start the application the first column will take twice the size then the third.
This should be a decent showcase, it's exactly the same for columns, just sideways.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300"/> //sets the height of the first row
<RowDefinition Height="*"/> //* sets the remainder of the height, doesn't work like auto!
</Grid.RowDefinitions>
<Grid Grid.Row="0"
HorizontalAlignment="Left"
Width="400"
Background="Green" />
<Grid Grid.Row="0"
Margin="400,0,0,0"
Background="Red"/>
<Grid Grid.Row="1"
Background="Blue"/>
<GridSplitter Grid.Row="0"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Height="2.5"
Background="Black" />
</Grid>
This is the current XAML i'm using to do this... and for the life of me cannot figure out how to expand the textbox to fill the entire column. Could anyone please guide me in the correct direction?
Thank you in advance!
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="15" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--ROW 0-->
<TextBlock Text="DOMAIN:"/>
<!--ROW 1-->
<Separator Grid.Row="1" Grid.ColumnSpan="2"/>
<!--ROW 2-->
<TextBlock Text="Connection credentials:" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
<Button Content="EDIT" Style="{DynamicResource SquareButtonStyle}" Width="80" Margin="0,0,10,0"/>
<TextBlock x:Name="CurrentCredentialslbl" Text="Connect as:" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</StackPanel>
<!--ROW 3-->
<TextBlock Text="Find accounts in domain:" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="3" Grid.Column="1">
<TextBox />
<Button Content="Browse" Style="{DynamicResource SquareButtonStyle}" Width="80" Margin="10,0,0,0"/>
</StackPanel>
<!--ROW 4-->
<CheckBox Content="Only search in this container" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="4" Grid.Column="0"/>
</Grid>
Grid with 2 columns instead of StackPanel should fit perfectly
<Grid Grid.Row="3" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox />
<Button Grid.Column="1"
Content="Browse"
Style="{DynamicResource SquareButtonStyle}"
Width="80" Margin="10,0,0,0"/>
</Grid>
I have a StackPanel, but the following line :
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />
is not Wrapping the Text.
<StackPanel Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0">
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
</DockPanel>
<TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
<Image
Grid.Row="0"
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />
<Image
Grid.Row="1"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>
</StackPanel>
The StackPanel Orientation is set to 'Vertical' but the TextBlock is not inheriting it.
Where am I going wrong?
Your problem is using the StackPanel that allows its children to fill in all the available space - the StackPanel stretches accordingly to the size of its content. Try removing the StackPanel and keep just the Grid - this way you will limit the size of its children to the available space used by the Grid.
If that isn't enough in the layout you've built, try setting a MaxWidth on the TextBox that needs wrapping.
Now the source of your problem was also the fact that your TextBox was inserted in the first Column of the Grid that had an infinite size (Width="Auto"). Thus, setting the Grid.Column="7" to the TextBox did the trick you wanted (wrapping text). Here's the revised code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0">
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
</DockPanel>
<TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
<Image
Grid.Row="0"
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="7" Text="{Binding Notes}" TextWrapping="Wrap" />
<Image
Grid.Row="1"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>