Develop Reference

Text not wrapping in ListViewItem

The ListViewItems are getting their width from the TextBlock element. I want the ListViewItem to fit to the ListView. I have seen in other posts that making HorizontalContentAlignment="Stretch" will fix the issue, but my problem persists. The second TextBlock element in the ItemTemplate is set to WrapWithOverflow.
Sources:
http://www.teixeira-soft.com/bluescreen/2016/03/21/c-how-to-make-a-panel-within-a-datatemplate-fill-the-entire-width-of-a-listview-or-itenscontrol-derivative/
Code:
<UserControl x:Class="XXXX.Views.XXXXView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:cal="http://www.caliburnproject.org"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="{StaticResource BlackBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="32*"/>
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="32*"/>
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="1">
<ListView Grid.Column="1"
x:Name="UniqueShortDescriptions"
VerticalAlignment="Stretch"
ItemsSource="{Binding UniqueShortDescriptions}"
SelectedItem="{Binding SelectedUniqueShortDescriptions}"
cal:Message.Attach="[Event SelectionChanged] = [Action SelectionChanged($this, $eventArgs)]">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Navy"
BorderThickness="3"
Margin="3"
Padding="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.RowSpan="3"
Grid.Column="0"
Text="{Binding Path=Date}"
Foreground="Black"
VerticalAlignment="Center"
TextBlock.FontWeight="ExtraBold"/>
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="{Binding Path=LongDescription}" Foreground="{StaticResource BlackBrush}"
TextWrapping="WrapWithOverflow"/>
<!--<TextBlock Text="{Binding Path=ShortExpenseDescription}" Foreground="{StaticResource BlackBrush}"/>-->
<TextBlock Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Cost}" Foreground="{StaticResource BlackBrush}"/>
<TextBlock Grid.Row="2"
Grid.Column="1"
Text="{Binding Path=Source}" Foreground="{StaticResource BlackBrush}"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DockPanel>
</Grid>
</UserControl>

I got the code you posted to work by simply disabling horizontal scrolling of the ListView.
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...

Vertical ScrollView of ListView without Height

My UWP application has ListView with dynamic contents. I want to enable ScrollView when it's height reaches to the end of device height it runs(desktop/mobile). I don't want to set height/maximum height of ListView. Because it should display as it is.
I have tried like below. But it is not working. It works only if specify the height of ListView.
<Grid HorizontalAlignment="Stretch" >
<Grid.RowDefinitions >
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView x:Name="ItemListView" Margin="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" >
<!--ListView ItemTemplate to fill-->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width=".8*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="2">
<TextBlock Text="{Binding SerialNum}" TextAlignment="Center" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0" >
<TextBlock Text="{Binding XX}" TextAlignment="Center" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="2" Orientation="Vertical" >
<TextBlock Text="{Binding YY}" TextAlignment="Center" />
<TextBlock x:Name="tb_list_date" HorizontalAlignment="Center" Text="{Binding ZZ}" TextAlignment="Center" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="3">
<TextBlock Text="{Binding AA}" TextAlignment="Center" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" >
<TextBlock Text="{Binding BB}" TextAlignment="Center"/> </StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

The problem is that the Grid.RowDefinition is set to Auto height. This lets the controls in the row to use any height they need. This causes the ListView to stretch beyond the boundaries of the page and because its height is actually the full height of the list, it does not scroll (but you can't see the overflow).
To fix this, change the Grid.RowDefinition Height to *. This will give the control all available space in the Grid but not more than that:
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
...
</Grid>

Vertical scrollbar for a listview within an expander

I have a grid(user-control) as follows with rows 1:5 being an Expander which holds a ListView, however my attempts to get the Vertical scrollbar for the ListView within the Expander have not been successful.
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
The Expander with the ListView is as below, I also attempted enclosing the Expander within a ScrollViewer but then the sizing of the collapsed header takes up all the space
<Expander IsExpanded="True"
Background="#1F4762"
BorderBrush="#1F4762"
Foreground="#FFEEEEEE"
Grid.Row="1"
Visibility="{qc:Binding '$P.View.Count > 0 ? Visibility.Visible: Visibility.Collapsed', P={Binding AListCVS}}"
BorderThickness="1,1,1,0">
<Expander.Header>
<TextBlock FontWeight="Bold"
VerticalAlignment="Center"
Margin="5"
FontSize="14"
Width="200">
<Run Text="A Listers : " />
<Run Text="{Binding AListCVS.View.Count, Mode=OneWay}"></Run>
</TextBlock>
</Expander.Header>
<Expander.Content>
<ListView
HorizontalContentAlignment="Stretch"
AlternationCount="2"
Style="{StaticResource aCompareTemplate}"
ItemTemplateSelector="{StaticResource ATemplateSelector}"
x:Name="lview"
ItemsSource="{Binding AListCVS.View}"
Visibility="{Binding }">
</ListView>
</Expander.Content>
</Expander
The list template is as follows
<Style x:Key="aCompareTemplate"
TargetType="ListView">
<!--Control Template-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0"
MinWidth="900"
VerticalAlignment="Center"
Background="#D4E3F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition MinWidth="200"></ColumnDefinition>
<ColumnDefinition MinWidth="400"></ColumnDefinition>
<ColumnDefinition Width="200*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
</Border>
<Border Grid.Column="1"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="2"
Height="30">
<TextBlock Text="A Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="3"
Height="30">
<TextBlock Text="B Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
</Grid>
<ItemsPresenter Grid.Row="1"></ItemsPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Any pointers are much appreciated.

Usually the problem with Scroll is due to the container in which it is inserted allow infinite size, and therefore it does not appear. Possibly you can correct this by setting a MaxHeight to your Grid.Row, or to your ListView.
Edit.: as was suggested by #FelixD. and as my above comment helped to solve the problem I am putting it here so the question can be marked as resolved.

Image not displaying at Run time

The image is not getting displayed at run time.It is displaying in the designer.
XAML:
<ScrollViewer Grid.Row="1" Grid.Column="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Assets/logo_108x108.png" Stretch="Fill" Width="400" VerticalAlignment="Top" HorizontalAlignment="Center" Height="133" Grid.RowSpan="3" />
<phone:WebBrowser x:Name="DescriptionBrowser" Grid.Row="1" Grid.RowSpan="2" Navigating="DescriptionBrowser_Navigating" Margin="0,149,0,0"/>
<TextBlock x:Name="ErrorBlock" Visibility="Collapsed" Foreground="Black" FontSize="20" Grid.Row="1" Grid.Column="1" Text="{Binding LocalizedResourcesFromCommonDll.ErrorGeneral, Source={StaticResource LocalizedCommonStrings}}" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI"/>
</Grid>
</ScrollViewer>
</Grid>
I tried replacing the Image tag ,but still it doesn't work.

I believe you mean something like this. Keep it simple as possible and do not set properties you might not need.
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Resources/AnyLogo.png" />
<ScrollViewer Grid.Row="1">
<WebBrowser />
</ScrollViewer>
<TextBlock Grid.Row="2" Text="{Binding TestText}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding TestText}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>

I tried the proposed answer and it works for me, with the following remarks:
The Resources directory is on the same level as the View, so the Source looks like this: Source="Resources/img.png"
Also, on the Properties of the image the Build Action is set to Resource (by default, but you can still check it)

WPF - Expander in Grid - eating space

I have very simple xaml.
<Grid Margin="0,50,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<!--<RowDefinition Height="50"/>-->
</Grid.RowDefinitions>
<Expander Header=""
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
ExpandDirection="Right"
IsExpanded="True"
Grid.Column="0"
Grid.Row="0"
Height="Auto"
>
<!-- My List control -->
</Expander>
<TabControl Name="ExecutionTab" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch">
<!-- soem tabs here -->
</TabControl>
</Grid>
Now after collasping expander the left part [row=0,col=0] being shown as empty with space.
What we want is right part [row=0,col=1] should take whole space.
What should be done in this case ?
I have tried HorizontalAlignment="Stretch" to Tab control but not working.
Do I need to add event handler like on collapse and change width of grid.. but it does not seems to good way ?
Can anyone suggest better way ?
Thanks

Using a Grid is not the best way to achieve what you want. You should use a DockPanel instead with LastChildFill = "true". I can't try it now but I would imagine it like this:
<DockPanel LastChildFill="true">
<Expander Header=""
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
ExpandDirection="Right"
IsExpanded="True"
DockPanel.Dock="Left"
Height="Auto"
>
<!-- My List control -->
</Expander>
<TabControl Name="ExecutionTab" HorizontalAlignment="Stretch">
<!-- soem tabs here -->
</TabControl>
</DockPanel>
This should make the tab control always take the entire remaining space.

You can make this work by setting your column definitions to:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
The complete code to show this working is below:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Expander ExpandDirection="Right" IsExpanded="True">
<TextBlock FontSize="50">Text For Expander</TextBlock>
</Expander>
<TabControl Name="ExecutionTab" Grid.Column="1">
<TabItem Header="Tab 1">
<TextBox FontSize="50" TextWrapping="Wrap">Text for Tab 1</TextBox>
</TabItem>
<TabItem Header="Tab 2">
<TextBox FontSize="50" TextWrapping="Wrap">Text for Tab 1</TextBox>
</TabItem>
</TabControl>
</Grid>
If you add the xaml above to a window, you should see the following

You will have to make you ColumnDefinition.Width to Auto and if you want fixed width for your TabControl you should give Width to TabControl.
<Grid Margin="0,50,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>