Develop Reference

Making GridSplitter working across rows

I'm trying to get the GridSplitter to work across the rows in my grid:
However, the RowSpan property doesn't seem to work in case of this control.
How can I get the GridSplitter to work across my grid table and share the column width when moved?
This is my code:
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" MinWidth="100" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="*" MinWidth="400" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Background" Value="Black" />
</Style>
</Grid.Resources>
<Border Grid.Column="0">
<TextBlock Text="First Column" />
</Border>
<GridSplitter
Grid.RowSpan="1"
Grid.Column="1"
HorizontalAlignment="Stretch"
ShowsPreview="True" />
<Border Grid.Column="2">
<TextBlock Text="Second Column" />
</Border>
</Grid>
<Grid
Grid.Row="1"
Height="400"
Background="Silver">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" MinWidth="100" />
<ColumnDefinition Width="*" MinWidth="400" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock
FontSize="30"
Foreground="Red"
Text="First Column Content" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock
FontSize="30"
Foreground="red"
Text="Second Column Content" />
</StackPanel>
</Grid>
</Grid>
</StackPanel>

You only have GridSplitter in the first Gird. You could merge the two grids you have into one grid to get the desired result. Here is merged XAML for you to try:
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Background" Value="Black" />
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<Border>
<TextBlock Text="First Column" />
</Border>
<TextBlock FontSize="30"
Foreground="Red"
Text="First Column Content" />
</StackPanel>
<GridSplitter Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
ShowsPreview="True"
Background="Gray"/>
<StackPanel Grid.Column="2">
<Border>
<TextBlock Text="Second Column" />
</Border>
<TextBlock FontSize="30"
Foreground="red"
Text="Second Column Content" />
</StackPanel>
Also, here is the screenshot of resulting output:
You may also want to refer to this how-to page on MSDN.

C# WPF UI freeze while datatable binding with Listbox

hi I am using DataTable for binding data with Listbox
DataTable row count = 1000+ and I have to load all row.
and when I binding
// Inside BackgroundThread
DataTable table = GetDataFromServer(); // Get Data (DataTable row count = 1000+)
this.Dispatcher.Invoke(new Action(() =>
{
FilteredList.DataContext = table ; // UI Hangs Progress bar freeze around 20-30+ seconds
}), DispatcherPriority.Background);
XML Code
<Grid Grid.Row="0" x:Name="gridFilteredList" Visibility="Collapsed">
<ListView Style="{DynamicResource MyListView}" Grid.Row="0" AllowDrop="True" x:Name="FilteredList"
IsSynchronizedWithCurrentItem="False" ItemsSource="{Binding Mode=OneWay}"
BorderThickness="0" BorderBrush="Black" ScrollViewer.ScrollChanged="syncList_ScrollChanged"
ItemContainerStyle="{StaticResource BorderedListViewItemStyle}" SelectedItem="{x:Null}"
Background="{DynamicResource DefaultMSBackgroundColor}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch" ScrollViewer.CanContentScroll="False" Focusable="True" SelectionChanged="syncList_SelectionChanged" SelectionMode="Single" MouseMove="syncList_MouseMove"
MouseEnter="syncList_MouseEnter"
MouseLeave="syncList_MouseLeave">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="FileItemGrid" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Cursor="Hand">
<Grid Margin="0 10 10 10" Height="35" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Cursor="Hand" Source="{Binding Path=imagestring, Mode=OneWay}" VerticalAlignment="Center" Margin="5,0" HorizontalAlignment="Center" Style="{StaticResource Image32StyleNearestNeighbor}" />
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Cursor="Hand" Foreground="#FF333333" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" VerticalAlignment="Center" Text="{Binding Path=name, Mode=OneTime}" />
<TextBlock Grid.Column="1" Cursor="Hand" Foreground="#FF333333" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" VerticalAlignment="Center" Text="{Binding Path=size, Mode=OneTime}" HorizontalAlignment="Right" />
</Grid>
<TextBlock Grid.Row="1" FontSize="11" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" >
<Run Text="{Binding Path=formattedtime, Mode=OneTime}" Foreground="#FFB3B3B3"/>
<Run Text="-"/>
<Run Text="{Binding Path=activity, Mode=OneTime}" Foreground="{Binding Path=StatusLabelColour, Mode=OneTime}"/>
</TextBlock>
</Grid>
<Grid Grid.Column="1" Margin="5 0 0 0" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Grid Visibility="{Binding Path=DeleteImageVisible, Mode=OneWay}" ToolTip="Click to recover file" Name="SyncDelete"
Cursor="Hand" MouseLeftButtonDown="SyncDelete_MouseLeftButtonDown" Style="{DynamicResource GridWithBackground}">
<Image x:Name="imgDelete" SnapsToDevicePixels="True" Source="pack://application:,,,/Resources/UserControl/SyncSummary_Delete.png"
Style="{StaticResource Image16StyleHighQuality}"/>
</Grid>
<Image Name="errorImage" VerticalAlignment="Center" Cursor="Hand" HorizontalAlignment="Center" Style="{StaticResource Image16StyleHighQuality}"
Source="{Binding Path=errorStringImage, Mode=OneWay}" ToolTip="{Binding Path=errorStringToolTip, Mode=OneWay}" ToolTipService.ShowDuration="50000" UseLayoutRounding="True" />
</Grid>
<Button Grid.Column="1" x:Name="btnShare" Content="Share" Click="btnShare_Click" Margin="0,0,10,0" >
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="White" />
<Setter Property="Height" Value="30" />
<Setter Property="Padding" Value="10,0,10,0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="{DynamicResource DefaultMSForegroundColor}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListViewItem}},Path=IsMouseOver, Mode=OneWay}"
Value="True" />
<Condition Binding="{Binding Path=ShareBtnVisible, Mode=OneWay}"
Value="Visible" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Visibility" Value="Visible" />
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Should i use ObservationCollection or Any other design pattern for solve freeze issue ?

You are setting the ScrollViewer.CanContentScroll attached property of the ListView to false which effectively disables the built-in UI virtualization and this affects the performance negatively.
Don't set this property to false if you care about rendering and scrolling performance.

Put your code in a Task (own thread) and your UI won't freeze anymore. You'll always have this problem when calling long running operations in the UI thread.

Create a WPF Custom ComboBox

What I'm trying to do is a combobox that have the favorite values on top, with a different background color and button. Right now I have:
<UserControl x:Class="ComboBoxWithButton"
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"
mc:Ignorable="d"
Name="root"
d:DesignWidth="300" Height="25">
<ComboBox
x:Name="ComboBoxBtn"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="0,0,0,-1"
Width="300"
ItemsSource="{Binding Source, RelativeSource={RelativeSource AncestorType=UserControl}}"
SelectedItem="{Binding Path=Selected, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}">
<ComboBox.Resources>
<Style TargetType="ComboBoxItem">
????
</Style>
</ComboBox.Resources>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FFE6E6FA"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">+</Button>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</UserControl>
Right now I have an Add button so I can add my items as favorites. But what I want now is, based on the item I represent it as favorite or not.
Case is a favorite have a different background color an a [-] button (to remove). Case is not the background is white as usual and have a [+].

See if a ContentControl helps you here in place of where you are using a Button.
<ComboBox.ItemTemplate>
<DataTemplate>
<ContentControl>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding ...}" Value="True">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FFE6E6FA"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">+</Button>
</Grid>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ...}" Value="False">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="Yellow"/>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding}" Width="250" />
<Button Grid.Column="1" Command="{Binding CommandButton, ElementName=root}"
CommandParameter="{Binding}">-</Button>
</Grid>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl>
</DataTemplate>
</ComboBox.ItemTemplate>

Dynamically change XAML column text

How do I programmatically set border XAML objects?
I can set it in the XAML:
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Typical Code" />
</Border>
Here I have it with a name to set it:
<Border x:Name="Column8Text" Grid.Column="3" Grid.Row="1">
</Border>
This has no effect:
Column8Text.Name = "test";
This is the entire grid im trying to dynamiclly manipulate:
<StackPanel x:Name="GridViewView" >
<Grid x:Name="StaticGridView" Background="WhiteSmoke">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Column5" />
<ColumnDefinition x:Name="Column6" />
<ColumnDefinition x:Name="Column7" />
<ColumnDefinition x:Name="Column8" />
<ColumnDefinition x:Name="Column9" />
<ColumnDefinition x:Name="Column10" />
<ColumnDefinition x:Name="Column11" />
<ColumnDefinition x:Name="Column12" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="5" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="TextBlock.FontSize" Value="16" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="TextBlock.FontWeight" Value="Bold" />
</Style>
</Grid.Resources>
<Border Grid.Column="0" Grid.Row="1">
<TextBlock Text="Item" />
</Border>
<Border Grid.Column="1" Grid.Row="1">
<TextBlock Text="Drawing" />
</Border>
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Typical Code" />
</Border>
<Border x:Name="Column8Text" Grid.Column="3" Grid.Row="1">
</Border>
<Border x:Name="Column9Text" Grid.Column="4" Grid.Row="1">
</Border>
<Border x:Name="Column10Text" Grid.Column="5" Grid.Row="1">
</Border>
<Border x:Name="Column11Text" Grid.Column="6" Grid.Row="1">
</Border>
<Border x:Name="Column12Text" Grid.Column="7" Grid.Row="1">
</Border>
</Grid>
</StackPanel>

This has no effect: Column8Text.Name = "test";
To set any child object's values one cannot simply name the parent and have access to the children.
Each individual child control has to be named to be accessed in code behind.
Otherwise to change the child objects via a parent, one should create a custom control with specific dependency properties tied to the children underneath to facilitate the passage of data to the children.
To complete your example
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Name="tbBorderChild" Text="Typical Code" />
</Border>
Then access it in codebehind as such:
tbBorderChild.Text = "Changed";

Textblocks overlapping each other in XAML

This is what I am trying to obtain:
Name
Date
This is the XAML I have. But in the result, both the texts Name & Date are overlapping each other.
<DataTemplate>
<Grid x:Name="showGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel>
<Grid Height="{Binding widthMA}" Width="{Binding widthMA}">
<Grid Margin="3.5" Background="White">
<Grid VerticalAlignment="Bottom" Background="Black" Height="30">
<TextBlock Text="{Binding strName}" Style="{StaticResource AlbumTitleText}" Grid.Row="0" />
<TextBlock Text="{Binding dateCreated}" Style="{StaticResource ArtistTitleText}" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
And the styles AlbumTitleText and ArtistTitleText are here
<Style x:Key="AlbumTitleText" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontFamily" Value="Fonts/Gotham-Bold.ttf#Gotham Bold" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="10,-2,10,7"></Setter>
</Style>
<Style x:Key="ArtistTitleText" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontFamily" Value="Fonts/Gotham-Bold.ttf#Gotham Bold" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Margin" Value="10,7,10,0"></Setter>
</Style>

I think your row definitions are in the wrong place. Try ...
<DataTemplate>
<Grid x:Name="showGrid">
<StackPanel>
<Grid Height="{Binding widthMA}" Width="{Binding widthMA}">
<Grid Margin="3.5" Background="White">
<Grid VerticalAlignment="Bottom" Background="Black" Height="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding strName}" Style="{StaticResource AlbumTitleText}" Grid.Row="0" />
<TextBlock Text="{Binding dateCreated}" Style="{StaticResource ArtistTitleText}" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>