ListBox scrollbar breaks sync columns with Grid.IsSharedSizeScope - c#

I need to show a table with headers using ListBox
I searched on the web about how to create this and i found this answer, here is the XAML code i created:
<Grid Grid.Row="1" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="6*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="quantityColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="priceColumn"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="editColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="deleteColumn"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Cantidad</TextBlock>
<TextBlock Grid.Column="1" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Precio</TextBlock>
<TextBlock Grid.Column="2" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Descripción</TextBlock>
<TextBlock Grid.Column="3" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Editar</TextBlock>
<TextBlock Grid.Column="4" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Eliminar</TextBlock>
</Grid>
<ListBox Grid.Row="1" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Auto" Name="OrderList" Background="Transparent" BorderBrush="{x:Null}" ManipulationBoundaryFeedback="OrderList_ManipulationBoundaryFeedback">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Focusable" Value="False"/>
<EventSetter Event="RequestBringIntoView" Handler="ListBoxItem_RequestBringIntoView"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="quantityColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="priceColumn"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="editColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="deleteColumn"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Foreground="White" TextAlignment="Center" Margin="7">Cantidad</TextBlock>
<TextBlock Grid.Column="1" Foreground="White" TextAlignment="Center" Margin="7">Precio</TextBlock>
<TextBlock Grid.Column="2" Foreground="White" TextAlignment="Center" Margin="7">Descripción</TextBlock>
<TextBlock Grid.Column="3" Foreground="White" TextAlignment="Center" Margin="7">Editar</TextBlock>
<TextBlock Grid.Column="4" Foreground="White" TextAlignment="Center" Margin="7">Eliminar</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
And here is the c# code i created to test and populate the ListBox
List<OrderItem> orders = new List<OrderItem>();
orders.Add(new OrderItem() { a = "wash", b = "b" });
orders.Add(new OrderItem() { a = "the", b = "c" });
orders.Add(new OrderItem() { a = "car", b = "d" });
orders.Add(new OrderItem() { a = "wash", b = "b" });
OrderList.ItemsSource = orders;
Since the ListBox only shows 4 rows, it doesnt have to set a scrollbar, and the headers are almost 100% aligned with the table columns:
The problem worsens when i add more rows to the ListBox and the scrollbar appears:
As you can see the offset of each column with its header its too big. How can i tell the Grid.IsSharedSizeScope to be aware of the width of the scrollbar and to consider it to the headers width? What i need it's to have the table columns 100% aligned with the table headers.

Related

How to prevent TextBlock taking all the available space

Here is my problem. I've built the following ListView
<ListView Grid.Row="1" x:Name="messageList" BorderThickness="0"
ItemsSource="{Binding MySource}"
HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<WrapPanel Grid.Row="0" Grid.Column="0">
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.SenderId}"
/>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.DeliverDate}"
/>
</WrapPanel>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.MsgText}"
Grid.Row="1" Grid.Column="0"
TextWrapping="WrapWithOverflow">
</TextBlock>
<WrapPanel Grid.Row="0" Grid.Column="1">
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.SenderId}"
/>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.DeliverDate}"
/>
</WrapPanel>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.MsgText}"
Grid.Row="1" Grid.Column="1"
TextWrapping="WrapWithOverflow">
</TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
For each element of MySource only 1 between Received and Sent will be not null. The ListViewis working as i expect, placing the element on the left or the right of the screen, but the TextBlock that contain the MsgText get all the available space (so the whole row) if the message is too long. How can i limit it to stay only in one half of the parent Grid and make the text overflow eventually?
EDIT: I added an image showing my problem. The 4th message should overflow, but it doesn't

It took me few minutes to produce mcve, but the missing part of the puzzle is this:
<Grid MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}">
That would limit maximum width of all Grids (each item has one) and let wrapping happens. Otherwise Grid is asking for a width to fit whole item in one line and ListView is ok with it, but then you will see horizontal scrollbar (the most hated control by users including me).
MCVE:
public partial class MainWindow : Window
{
public class Item
{
public string Received { get; set; }
public string Sent { get; set; }
}
public List<Item> Items { get; }
public MainWindow()
{
InitializeComponent();
Items = new List<Item>
{
new Item { Received = "1111 111 11 111 11 1" },
new Item { Received = "2222 2 22 2 2 222222222 2 222222 22222222 222222222222 2" },
new Item { Sent = "333333333 3333333 333 33333 3 3 33 333333333 3333" },
new Item { Received = "444444444444444 444 44444444444444 44 4 44444444444444444 4 4 4444444444 4 444 444444444444" },
};
DataContext = this;
}
}
Screenshot:
Xaml:
<ListView ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Received}"
TextWrapping="WrapWithOverflow" />
<TextBlock Grid.Column="1"
Text="{Binding Sent}"
TextWrapping="WrapWithOverflow" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>

The problem is that your grid (and the width of the column) is calculated for each element of your list, so it takes the most space possible. I propose a backup solution, I did not find better but the result is there.
This is to place 2 ListView in 2 columns of a grid and then have the Received element in one and the Sent in the other.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="0" x:Name="messageListReceived" BorderThickness="0"
ItemsSource="{Binding MySource}"
HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0">
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.SenderId}"
/>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.DeliverDate}"
/>
</WrapPanel>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Received.MsgText}"
Grid.Row="1"
TextWrapping="WrapWithOverflow">
</TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Grid.Column="1" x:Name="messageListSent" BorderThickness="0"
ItemsSource="{Binding MySource}"
HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0">
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.SenderId}"
/>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.DeliverDate}"
/>
</WrapPanel>
<TextBlock Margin="2"
VerticalAlignment="Center"
Text="{Binding Sent.MsgText}"
Grid.Row="1"
TextWrapping="WrapWithOverflow">
</TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

How to additional control to ItemsControl

I am building out an ItemsControl that holds Grid elements. Each time an item is added to an ObservableCollection, a new Grid control is created in the ItemsControl. Right now I have some margin between each Grid control but I want to have a TextBox between each control but I am unable to add it appropriately.
If my Grids look like this in the item control
----------------
----------------
I would want the text box here.
----------------
----------------
And here
----------------
----------------
As of now, this is my ItemsControl:
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1" Grid.ColumnSpan="4">
<ItemsControl Grid.Row="1" Grid.ColumnSpan="3" ItemsSource="{Binding StudentsInClassCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Grid.Row="1" Grid.ColumnSpan="3" Margin="5, 0, 15, 50" Height="70">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Grid Grid.Column="1">
<Border BorderThickness="1" BorderBrush="{Binding StudentMemberColor}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<dxe:TextEdit Grid.Column="1" Margin="5, 5, 5, 5" Width="50" Height="50" HorizontalContentAlignment="Center"
FontFamily="Helvetica" FontWeight="Thin" FontSize="16"
Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</Border>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>

How to design this site menu style in WPF

I am trying to implement www.devexpress.com menu.
But I do not know what to do to implement the unfolding details below.
this is my source file.
enter link description here
<Window
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:MenuTest02"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="MenuTest02.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="579.8" Width="1600" WindowState="Maximized">
<Window.Resources>
<Style x:Key="styleTopMenu" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Microsoft JhengHei"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
x:Name="mnuContent" Margin="0"/>
<Border Grid.Column="1" Grid.Row="0" BorderBrush="Gray"
BorderThickness="0,0,1,0" HorizontalAlignment="Right"
Height="30" VerticalAlignment="Center" Width="1"/>
<!--
<Polyline Name="mnuTriangle" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="2" Visibility="Visible"
Points="0,10 10,0 20,10 0,10" Fill="#FF313131"/> -->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="BlueViolet"/>
<!-- <Setter TargetName="grdProductsSubmenu" Property="Visibility" Value="True"/> -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- <GridLength x:Key="GridLength1">1195</GridLength> -->
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition x:Name="grdMainDisplay" Width="1195" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Top border -->
<Border Grid.Row="0" Grid.ColumnSpan="3" Background="#FF4A4A4A" Width="Auto" Height="26"/>
<!-- bottom Line in menu -->
<Border Grid.Row="1" Grid.ColumnSpan="3" Background="Transparent" Width="Auto" Height="1" BorderBrush="Gray" BorderThickness="0,1,0,0" VerticalAlignment="Top" Margin="0,66,0,0"/>
<!-- Top Menu -->
<Grid Grid.Column="1" Grid.Row="1" Height="66" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="images\logo.png" HorizontalAlignment="Right" Height="66"/>
<!--
<Border Grid.Column="2" BorderBrush="Gray" BorderThickness="0,0,1,0" HorizontalAlignment="Right" Height="30" VerticalAlignment="Center" Width="1"/>
<TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontSize="18" Text=" Products " />
-->
<Button Grid.Column="2" Content=" Products " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="3" Content=" Free Trials & Demos " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="4" Content=" Buy " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="5" Content=" Support " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="6" Content=" My Account " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="7" Content=" About Us " Style="{StaticResource styleTopMenu}"/>
<Image Grid.Column="8" Source="images\cart_blogs_search.jpg" Margin="30,0,0,0" Height="54" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1" Margin="0,56,0,0" Height="10" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">
<Polyline x:Name="triProducts" Margin="320,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triFreeTrials" Margin="480,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triBuy" Margin="620,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triSupport" Margin="705,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triMyAccount" Margin="830,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triAboutUs" Margin="950,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Margin="0,66,0,0" Height="Auto" Visibility="Hidden"
VerticalAlignment="Top" Background="#FF313131" x:Name="grdProductsSubmenu" Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0,0,0,0" Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" >
<Grid Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<TextBlock Text="Suites" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="BEST VALUE" Margin="0,10,0,10" FontSize="14" Foreground="Orange"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FFF88E1D" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0" Text="Universal" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,15" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="products in one integrated suite)"/></TextBlock>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FF406EA4" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0,0,0,0" Text="Dxperience" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,0" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="Controls along with CodeRush)"/></TextBlock>
</Grid>
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,50,0,0"
Fill="#FF4C4C4C" Height="50" Width="230" RadiusX="2" RadiusY="2"/>
<TextBlock Margin="0,-50,0,0" FontSize="14"
Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Compare Features"/><LineBreak/><Run Text="and Pricing"/>
</TextBlock>
</StackPanel>
<Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical">
<TextBlock Text=".NET Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="INDIVIDUAL PLATFORMS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="WinForms" FontSize="14" Foreground="White"/>
<TextBlock Text="ASP.NET" FontSize="14" Foreground="White"/>
<TextBlock Text="MVC" FontSize="14" Foreground="White"/>
<TextBlock Text="WPF" FontSize="14" Foreground="White"/>
<TextBlock Text="Windows 10 Apps" FontSize="14" Foreground="White"/>
<TextBlock Text="CROSS-PLATFORM" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Reporting" FontSize="14" Foreground="White"/>
<TextBlock Text="Document Automatoin" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical" Margin="220,24,0,0">
<TextBlock Text="ENTERPRISE TOOLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Report Server" FontSize="14" Foreground="White"/>
<TextBlock Text="Analytics Dashboard" FontSize="14" Foreground="White"/>
<TextBlock Text="FRAMEWORKS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="eXpressApp Framework" FontSize="14" Foreground="White"/>
<TextBlock Text="CODE-DEBUG-REFACTOR" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="CodeRush for Visual Studio" FontSize="14" Foreground="White"/>
</StackPanel>
<Border Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<Grid Grid.Row="1" Grid.Column="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock Text="HTML JS Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="HYBRID APPS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DevExtreme Moboile" FontSize="14" Foreground="White"/>
<TextBlock Text="DevExtreme Web" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Xamarin.Forms" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="UI CONTROLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Free Data Grid" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<TextBlock Text="iOS" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="NATIVE" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DataExplorer" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Testing Tools" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="WEB TESTING" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="TestCafe" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Vertical">
<TextBlock Text="Delphi & C++Builder Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="DELPHI & C++BUILDER" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="VCL" FontSize="14" Foreground="White"/>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</Grid>
<!-- Main Display -->
<Grid Grid.Column="1" Grid.Row="1" Height="Auto" Margin="0,66,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center">
<Run Text="(includes all DevExpress.Netl"/>
<LineBreak/>
<Run Text="Controls along with CodeRush)"/>
<LineBreak/>
<Run Text="Some Text..."/>
</TextBlock>
<Path Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" Data="M50.0000011012083,0.5L99.5000021617096,99.5L0.00000040707015,99.5z" Stroke="Black"
StrokeThickness="4" Fill="Yellow"/>
</Grid>
</Grid>

you can set a grid with 4 columsn and 2 rows.
In each of the upper cells you place one of the section names
In the bottom row you place one panel with the details, set its property Grid.ColumnSpan = 4 Grid.Column = 0 grid.row = 1 so it spreads through the whole section. (I think this part is pretty ok in your code) and visibility=visible opacity=1
Then you hook to the on mouse enter for each of the upper elements and when entering, you set the opacity of all the lower panels to 0, but the desired one to 1.
This will show the desired panel with no animation. When you have it working, to achieve the animation you need to use DoubleAnimation and animate the opacity property of the other to zero instead of just setting it.
Please let us know if you find particular problems in your way

Cannot get TextBlock to word wrap inside a ListBox

I am having trouble getting the text in a TextBlock to wrap. The TextBlock is inside a Grid, which is part of a ListBoxItem template. Below is my XAML:
<ListBox Grid.Row="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Center" VerticalAlignment="Top" Height="600" Width="600" Name="lb_TestResults" ItemsSource="{Binding Test}" Margin="5,5,5,5">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="DarkGray" BorderThickness="1" Padding="4">
<Grid Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Name="tb_nameLabel" Margin ="0, 0, 3, 0" FontSize="15" FontFamily="Verdana" Grid.Row="0" Grid.Column="0"><Bold>Test: </Bold></TextBlock>
<TextBlock Name="tb_Name" Text="{Binding Name}" FontSize="15" FontFamily="Verdana" Grid.Row="0" Grid.Column="1"></TextBlock>
<TextBlock Name="tb_descLabel" Margin="0, 0, 3, 0" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0"><Bold>Description: </Bold></TextBlock>
<TextBlock Name="tb_Description" Text="{Binding Description}" Grid.Row="1" Grid.Column="1" ></TextBlock>
<TextBlock Name="tb_statusLabel" Margin="0, 0, 3, 0" Grid.Row="2" Grid.Column="0"><Bold>Status: </Bold></TextBlock>
<TextBlock Name="tb_Status" Text="{Binding Status}" Grid.Row="2" Grid.Column="1"></TextBlock>
<TextBlock Name="tb_resultLabel" Margin="0, 0, 3, 0" Grid.Row="3" Grid.Column="0"><Bold>Result: </Bold></TextBlock>
<TextBlock Name="tb_Result" Text="{Binding Result}" Grid.Row="3" Grid.Column="1"></TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I originally had the TextBlocks inside StackPanels, but reading various other questions on this topic such as this, I decided to change it to a Grid. I only need the TextBlock tb_Description to word wrap. Right now the output looks like this:
As you can see the text is not wrapping.
I have tried setting the width explicitly on the TextBlocks, the Grid columns, and the ListBox, but nothing has helped so far. I also disabled the horizontal scrollbar, the scrollbar is gone now but the text is still trailing off the edge. Any ideas?

The problem is not with the ListBox but with the Grid you are using to align text blocks. Both columns are set to Auto which results in Grid allowing columns to occupy all space their content requests for.
You need to set Width of the second ColumnDefinition to *:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Hi you must set the 2nd column to * so it stretches and you have swapped the TextBlock that should wrap, just a "typo" :)
Change
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<!-- And these here you have set the wrong textblock to wrap =) -->
<TextBlock Name="tb_descLabel" Margin="0, 0, 3, 0" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0"><Bold>Description: </Bold></TextBlock>
<TextBlock Name="tb_Description" Text="{Binding Description}" Grid.Row="1" Grid.Column="1" ></TextBlock>
To
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- ..... -->
<TextBlock Name="tb_descLabel" Margin="0, 0, 3, 0" Grid.Row="1" Grid.Column="0"><Bold>Description: </Bold></TextBlock>
<TextBlock Name="tb_Description" Text="{Binding Description}" Grid.Row="1" Grid.Column="1" TextWrapping="Wrap"></TextBlock>
Result
Cheers!

GridView Data overlays with Header after vertical scrolling in Microsoft Store App

I have a GridView that looks as follows:
<Page
x:Name="pageRoot"
x:Class="View.ServiceModule"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:View"
xmlns:common="using:View.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding ServiceTasksFiltered}"
IsSourceGrouped="true"
ItemsPath="ServiceTasksFiltered">
</CollectionViewSource>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridView
Visibility="Collapsed"
x:Name="serviceTasksFilteredGridView"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
ItemsSource="{Binding ServiceTasksFiltered, Mode=TwoWay}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="true"
ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
VerticalAlignment="Top">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="500"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Debitornr." TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="1" Text="Name" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Text="Belegnr." TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="3" Text="Reaktionsdatum" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="4" Text="Priorität" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
</Grid>
</GridView.Header>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="500"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding CustomerNo}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="1" Text="{Binding CustomerName}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="2" Text="{Binding DocumentNo}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="3" Text="{Binding ResponseDateDisplay}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="4" Text="{Binding PriorityDisplay}" TextWrapping="Wrap" FontSize="20"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0"
Click="BackButton"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="Serviceaufgaben" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
When I try to scroll down to display the bottom rows, the top rows are being moved higher instead of disappearing. Please see the following picture for a better descirption:
GridView with wrong scrolling settings
As you can see the GridView is scrolled down and the rows are behind the header of the page. I need them to disappear.
Any help would be greatly appreciated.

Categories