Develop Reference

WPF ItemTemplate Causing ListBox Content Size Issue

In a WPF project, I have a ListBox that renders correctly if I manually insert items in XAML, e.g.:
<ListBoxItem>
<Grid Background="#7F271043" Width="200" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="110" />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Logo-40p.png" HorizontalAlignment="Center" Margin="10,10,10,10" />
<TextBlock Grid.Row="1" Text="Test Item" Foreground="White" Margin="10,0,10,0" FontSize="16" VerticalAlignment="Center" />
<local:Rating Grid.Row="2" HorizontalAlignment="Left" Height="24" Margin="10,0,0,0" VerticalAlignment="Center" Width="130" SelectedValue="4" IsReadOnly="True" />
<TextBlock Grid.Row="2" Text="Free" Foreground="#FF969292" Margin="0,0,10,0" FontSize="14" HorizontalAlignment="Right" VerticalAlignment="Center" />
</Grid>
</ListBoxItem>
The bottom of the ListBoxItem looks like:
However, the moment I swap out <ListBoxItem> for:
<ListBox.ItemTemplate>
<DataTemplate>
Even if I keep everything else identical, it creates a sizing problem with my rating control that I'm unable to fix (doesn't respond to manual size or stretch settings):
Any thoughts on how to address this? Do ItemTemplate / DataTemplate do something that might cause a control to not respect the size manually set or set by the grid row it's in?

Managed to fix this - it seems that a manually defined ListBoxItem in XAML behaves differently from the output of an ItemTemplate / DataTemplate.
My rating user control had a set height and width specified that were overridden by the implementation XAML (height/width/stretch) inside a ListBoxItem but not inside a ItemTemplate / DataTemplate:
mc:Ignorable="d" Height="750" Width="4070" MouseLeave="UserControl_MouseLeave">
So I instead changed Height / Width to DesignHeight / DesignWidth to fix the issue:
mc:Ignorable="d" d:DesignHeight="750" d:DesignWidth="4070" MouseLeave="UserControl_MouseLeave">

Scrollable textbox in WPF won't scroll because it's bigger than the container

This textbox never lets me scroll. I am fairly certain it's because it is vertically expanding to "show" all the text. However, it is expanding past (and underneath) the bottom of the grid row it's in, so the text is not being displayed - yet the scroll bars are disabled (because it thinks there is no reason to show them).
The result is I see the top of the text in the file, and it gets cut off when it reaches the bottom of the grid cell it's in.
What do I need to do to tell the control: "Expand to the width and height of the grid cell you're in, and show the vertical scroll bar when the text won't fit in that space"?
<StackPanel Grid.Column="1" Grid.Row="1">
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>
</StackPanel>

If you change it to this it will work.
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
But in same time you have to make sure that your grids height is set to * or a fixed size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> //Or whatever size you want
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
</Grid>
Btw, your StackPanel is redundant unless you have more controls inside it.
EDIT:
Well... First of all like mm8 and user2837961 explained a Scrollviewer doesn't make sense inside a StackPanel, because StackPanel can get expanded infinite. ScrollViewer only works when the object inside it are bigger than the size if it self. By giving your Grid row the size of *, you assign the remaining space of the grid for that row, means that items belonging to that row gets a fixed size. And if your Textbox is bigger than the ScrollViewer size the ScrollBarVisibility will be triggered.

Why do you need a StackPanel? I suggest you remove it and place the Grid.Column and Grid.Row in the ScrollViewer:
<ScrollViewer Grid.Column="1" Grid.Row="1" CanContentScroll="True" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>

Putting ScrollViewers inside StackPanels is a bad idea. This is because a StackPanel measures its children with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. Please refer to my answer here for more information about this:
Horizontal scroll for stackpanel doesn't work
This basically means that the ScrollViewer element has an infinite height here and thus no vertical scrollbar is displayed.
So, as suggested by #user2837961, you should simply get rid of the StackPanel:
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="longText" Foreground="White" FontFamily="Times New Roman" FontSize="24" TextWrapping="Wrap" />
</ScrollViewer>
Also make sure that there is no other StackPanel further up the visual tree.

how to add two or more buttons in dock panel?

I am using WPF and DevExpress. I want to add two buttons in dock panel. As I added 2nd button it said: Content is set more than once. Why is it so ? Did I made any mistake or is dock panel doesn't allow this.
<dxdo:DockLayoutManager Margin="0,-3,-156,0" HorizontalAlignment="Right" VerticalAlignment="Top" Background="White" Height="243" Width="109">
<dxdo:LayoutGroup Caption="LayoutRoot" Margin="0,0,0,172">
<dxdo:LayoutGroup Orientation="Vertical">
<dxdo:LayoutPanel x:Name="Panel1" ShowCloseButton="False" ShowMaximizeButton="False" ShowPinButton="False" ShowRestoreButton="False" ShowControlBox="False" AllowDock="False" AllowDrag="False" AllowFloat="False" AllowHide="False" AllowClose="False" AllowActivate="False" AllowMinimize="False" AllowMaximize="False">
<Button x:Name="ToggleButton1" Content="New" Click="ToggleButton_Click" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Content="Delete Focused Row"
Click="DeleteButton_Click33"
Grid.Column="1" />
</dxdo:LayoutPanel>
<dxdo:LayoutPanel x:Name="Panel2" ShowCloseButton="False" ShowMaximizeButton="False" ShowPinButton="False" ShowRestoreButton="False" ShowControlBox="False" AllowDock="False" AllowDrag="False" AllowFloat="False" AllowHide="False" AllowClose="False" AllowActivate="False" AllowMinimize="False" AllowMaximize="False">
<Button x:Name="ToggleButton2" Content="Close" Click="ToggleButton2_Click" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</dxdo:LayoutPanel>
</dxdo:LayoutGroup>
</dxdo:LayoutGroup>
</dxdo:DockLayoutManager>

You can place more than one control into the LayoutPanel.Content property. Just wrap your buttons into panel:
<dxdo:LayoutPanel ... >
<StackPanel Orientation="Vertical">
<Button x:Name="button1" ... />
<Button x:Name="button2" ... />
</StackPanel>
</dxdo:LayoutPanel>
Related example: How to build a layout of controls within LayoutPanels

How to make ScrollViewer work only when texblock in it has height greater than ScrollViewer height?

In my ListBox I show different content including text. Text can be long or short. It scrolls by ScrollViewer. Code:
<ScrollViewer MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" >
<TextBlock Style="{StaticResource TextsTextBlock}" Text="{Binding Texts}" Grid.Column="1" Grid.Row="1" />
</ScrollViewer>
and it's also working if text is short, and height of this text do not reach MaxHeight of ScrollViewer. I want to make ScrollViewer works only when text is long and it's height greater than ScrollViewer's MaxHeight, else - it doesn't have to work.
Tried border
<Border BorderBrush="Aqua" BorderThickness="2" MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" >
<TextBlock Style="{StaticResource TextsTextBlock}" Text="{Binding Texts}" Grid.Column="1" Grid.Row="1" />
</ScrollViewer>
</Border>
but it's still scrolls in this border.

Set the VerticalScrollBarVisibility property to Auto.
The default value is Visible which means that the scroll bar is always shown.
By contrast the HorizontalScrollBarVisibility property has a default value of Hidden.

Try removing some of the Grid. properties from the inner controls
<Border BorderBrush="Aqua" BorderThickness="2" MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
<TextBlock Text="text" TextWrapping="Wrap"/>
</ScrollViewer>
</Border>
this works fine with one line of text
If I copy paste your code it works fine

Listbox extending off the page

I have a listbox inside of a stack panel inside of a border in a silverlight application and when ever I add anything to the listbox it increases in height so the scrollbar is never used and it extends beyond the boundaries of the border element. I have tried explicitly setting the height attribute of the listbox, the border and the stack panel and it still goes beyond this.
Here is my code:
<Border x:Name="articlePane">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button Content="Latest" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Pending" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
<Button Content="Done" MouseEnter="HandleRollInAnimation" MouseLeave="HandleRollOutAnimation" />
</StackPanel>
<ListBox x:Name="articleList" Margin="5" Background="Transparent" ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center">
<Image x:Name="articleImage" />
<TextBlock x:Name="articleTitle" Text="{Binding Path=Title}" FontSize="18" FontWeight="Bold"
Margin="5"/>
<TextBlock x:Name="articleDate" Text="{Binding Path=Date}" FontSize="14" Foreground="Gray"
Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>

I have a feeling that the StackPanel just keeps on adding height forever. I think in this instance you'd be better off with a Grid layout within your Border. Put the Button StackPanel in one height defined row, and the ListBox in an autosizing * height row. This way Grid will stick within the confines of your form.