Develop Reference

How to design this ListViewItem

I want my ListViewItem to look like this. As you can see when the ListViewItem is selected/has focus the Border should change color.
The Main Problem is that I can't put a Border around the ContenPresenter in the ControlTemplate because than also the TextBox with the "Description"-Binding will be inside the Border. But I only want the TextBox and Icon to be inside the Border that changes Colors and not also the Description ("Nachname", "Vorname").
This is the XAML I have so far. I don't know how to change the border in the ControlTemplate:
<ListView x:Name="SearchFields" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding CustomerSearchFields}" SelectedItem="{Binding selectedSearchField, UpdateSourceTrigger=LostFocus}" Style="{StaticResource MaterialDropShadowStyle}"
BorderThickness="0,0,2,0" Padding="24,24,24,0" HorizontalContentAlignment="Stretch" helper:EnterKeyTraversal.IsEnabled="True" KeyboardNavigation.TabNavigation="Cycle" FontFamily="{StaticResource DefaultFontFamily}"
Background="{StaticResource ColorLightGray2}">
<ListView.Resources>
<DataTemplate DataType="{x:Type model:CustomerSeachFieldViewModel}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="48" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Description}" FontSize="{StaticResource FontSizeSmall}" FontWeight="SemiBold" Foreground="{StaticResource ColorDarkGray}" Margin="0,0,0,4" />
<Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1" BorderBrush="{StaticResource ColorGray}">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding SearchText}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="{StaticResource FontSizeNormal}" Padding="12,15" BorderThickness="0" />
<Border Grid.Column="1" Background="{StaticResource ColorLightGray2}" Margin="8">
<ctrl:IconViewbox IconData="{StaticResource IconPathSearch}" IconSize="16" IsTabStop="False" />
</Border>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Margin" Value="0,0,0,24" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter Content="{Binding}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter Property="BorderBrush" Value="Fuchsia" />
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>

You can add a Trigger to your Border named PART_Border as follow:
<Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1" >
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="DarkGray" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}"
Value="True" >
<Setter Property="BorderBrush" Value="Black"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Text="{Binding SearchText}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="15" Padding="12,15" BorderThickness="0" />
<Border Grid.Column="1" Background="Gray" Margin="8">
<Rectangle Width="20" Height="20" />
</Border>
</Grid>
</Border>
Please note that I replaced some StaticResource mapped to some Colors from your code with standard color in order to test my code.
I also replaced the icon with a Rectangle for the same reason.

Try for your IsSelected trigger:
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="PART_Border" Property="BorderBrush" Value="Fuchsia" />
<Setter TargetName="PART_Border" Property="BorderThickness" Value="1" />
</Trigger>

You could add a Style with a DataTrigger that binds to the IsSelected property of the parent ListViewItem to the Border in your DataTemplate:
<Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="{StaticResource ColorGray}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}"
Value="True">
<Setter Property="BorderBrush" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
Note that you need to set the default value of the property ({StaticResource ColorGray}) using a Style setter for the DataTrigger to be able to set the property when the ListViewItem is selected.

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.

DataGrid Column Header with filter box binding error

After trying for some days I stripped my project down to the minimum to attach it here to my question.
I want to add a text filter box to my WPF datagrid header.
But I get these error messages:
System.Windows.Data Error: 40 : BindingExpression path error: 'TextFilterData' property not found on 'object' ''DataGridColumnHeader' (Name='PART_FillerColumnHeader')'. BindingExpression:Path=TextFilterData; DataItem='DataGridColumnHeader' (Name='PART_FillerColumnHeader'); target element is 'TextBox' (Name='PART_TextFilter'); target property is 'Text' (type 'String')
System.Windows.Data Error: 40 : BindingExpression path error: 'TextFilterData' property not found on 'object' ''DataGridColumnHeader' (Name='')'. BindingExpression:Path=TextFilterData; DataItem='DataGridColumnHeader' (Name=''); target element is 'TextBox' (Name='PART_TextFilter'); target property is 'Text' (type 'String')
The datagrid in my application:
<Grid>
<local:MyDataGrid x:Name="myDataGrid">
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Width="64"
Binding="{Binding Path=id, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, FallbackValue=''}"
local:DataGridColumnExtensions.TextFilterData="{Binding Path=FilterId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource {x:Type DataGridColumnHeader}}">
<Setter Property="ToolTip" Value="The ID of the person"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<!-- The filter data will be replaced by property binding in the real application. Here I'm using a fix value for the sake of simplicity -->
<DataGridTextColumn Header="Name" Width="400"
Binding="{Binding Path=name, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, FallbackValue=''}"
local:DataGridColumnExtensions.TextFilterData="{Binding Path=FilterName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource {x:Type DataGridColumnHeader}}">
<Setter Property="ToolTip" Value="The name of the person"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
</DataGrid.Columns>
</local:MyDataGrid>
</Grid>
I'm using an extension class to create the dependency property for the text filter content
public class DataGridColumnExtensions
{
public static readonly DependencyProperty TextFilterDataProperty = DependencyProperty.RegisterAttached("TextFilterData", typeof(string), typeof(DataGridColumn), new FrameworkPropertyMetadata(String.Empty));
public static string GetTextFilterData(DependencyObject target)
{
return (string)target.GetValue(TextFilterDataProperty);
}
public static void SetTextFilterData(DependencyObject target, string value)
{
target.SetValue(TextFilterDataProperty, value);
}
}
And here is the datagrid style I'm using. I tried to remove everything not needed for the sake of simplicity.
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1" Background="Gray" BorderBrush="DarkGray" Grid.ColumnSpan="2" />
<ContentPresenter Margin="3" VerticalAlignment="Center" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill" Grid.Column="1" Width="8" Height="6" Fill="White" Margin="0,0,8,0" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" />
<TextBox x:Name="PART_TextFilter"
Grid.Row="1" Margin="1,0,1,4"
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGridColumnHeader}}, Path=Column.TextFilterData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource Style_HeaderGripper}"/>
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource Style_HeaderGripper}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="{x:Null}">
<Setter TargetName="BackgroundBorder" Property="Background" Value="Transparent" />
<Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="Transparent" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BackgroundBorder" Property="Background" Value="LightGray" />
<Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="Gray" />
</Trigger>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type local:MyDataGrid}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyDataGrid}">
<Border Background="{TemplateBinding Background}">
<ScrollViewer Focusable="false" Name="DG_ScrollViewer">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="3" Background="Gray" BorderBrush="DarkGray" BorderThickness="0,1" />
<Button Command="{x:Static DataGrid.SelectAllCommand}" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=RowHeaderActualWidth}" Focusable="false" OverridesDefaultStyle="True"/>
<DataGridColumnHeadersPresenter Grid.Column="1"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
Path=HeadersVisibility,
Converter={x:Static DataGrid.HeadersVisibilityConverter},
ConverterParameter={x:Static DataGridHeadersVisibility.Column}}"/>
<ScrollContentPresenter Grid.Row="1" Grid.ColumnSpan="2" CanContentScroll="{TemplateBinding CanContentScroll}" />
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</Style.Triggers>
</Style>
What is missing to get the filter content binding working?
Any help is highly appreciated.
2016-08-10: Update with first fix

In the Header ControlTemplate, you're using RelativeSource Self inside the TextBox
<TextBox x:Name="PART_TextFilter"
...
Text="{Binding RelativeSource={RelativeSource Self}, Path=TextFilterData, ...}"/>
The error message states there's no TextFilterData property on this TextBox.
Try
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGridColumnHeader}},
Path=Column.TextFilterData, ...}"/>

SelectedRow of datagrid is not selected again after returning to same Page

I have two different Pages called Select and Edit. Both of them shares same ViewModel named SalesAccountsViewModel.
I have a DataGrid in Select Page as follows:
Then I select it any Item from the DataGrid :
Then I click on edit button on selected row as shown below:
After that I am redirected to another Page as shown below:
When I click on save button:
I am again redirected to the Previous Page but can you see the first row? It is not Highlighted fully:
Here is Select Page that I use:
<Page x:Class="MiniAccountWPF.Views.Pages.Masters.SalesAccounts.Select"
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:vm="clr-namespace:MiniAccountWPF.ViewModels.Masters"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Select" DataContext="{StaticResource salesAccountsViewModel}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="0,10" HorizontalAlignment="Left"
Content="{Binding SelectedChildMenuItem.MenuItemName, Converter={StaticResource createButtonContentConverter}, Source={StaticResource mainWindowViewModel}}" />
<DataGrid Grid.Row="1" ItemsSource="{Binding Ledgers}" SelectedValue="{Binding SelectedLedger}"
IsReadOnly="True" AutoGenerateColumns="False" SelectionMode="Single" SelectionUnit="FullRow">
<DataGrid.Columns>
<DataGridTextColumn Header="Customer Name" Binding="{Binding LedgerName}" />
<DataGridTextColumn Header="City" Binding="{Binding City}" />
<DataGridTemplateColumn Header="Mobile Numbers">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding MobileNo1, Converter={StaticResource mobileNumberFormatConverter}, ConverterParameter=N}" />
<Run Text="{Binding MobileNo1, Converter={StaticResource mobileNumberFormatConverter}, ConverterParameter=S}" FontFamily="Consolas"/>
<Run Text=" " FontFamily="Consolas"/>
<Run Text="{Binding MobileNo2, Converter={StaticResource mobileNumberFormatConverter}, ConverterParameter=N}" />
<Run Text="{Binding MobileNo2, Converter={StaticResource mobileNumberFormatConverter}, ConverterParameter=S}" FontFamily="Consolas"/>
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Opening Balance" Binding="{Binding OpeningBalance}" />
<DataGridTemplateColumn Header="Edit">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="Edit" Style="{StaticResource EditButton}"
Command="{Binding DataContext.EditCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Delete">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="Delete" Style="{StaticResource DeleteButton}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Page>
Here is the Edit Page:
<Page x:Class="MiniAccountWPF.Views.Pages.Masters.SalesAccounts.Edit"
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:vm="clr-namespace:MiniAccountWPF.ViewModels.Masters"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Edit" DataContext="{StaticResource salesAccountsViewModel}">
<Grid DataContext="{Binding SelectedLedger}">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="350" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Name" Style="{StaticResource txtBlock}"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text=" : " HorizontalAlignment="Right" Style="{StaticResource txtBlock}"/>
<TextBox Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="3" Text="{Binding LedgerName}"/>
<TextBlock Grid.Row="3" Grid.Column="1" Text="City" Style="{StaticResource txtBlock}"/>
<TextBlock Grid.Row="3" Grid.Column="1" Text=" : " HorizontalAlignment="Right" Style="{StaticResource txtBlock}"/>
<TextBox Grid.Row="3" Grid.Column="2" Text="{Binding City}"/>
<TextBlock Grid.Row="5" Grid.Column="1" Text="Mobile No." Style="{StaticResource txtBlock}"/>
<TextBlock Grid.Row="5" Grid.Column="1" Text=" : " HorizontalAlignment="Right" Style="{StaticResource txtBlock}"/>
<TextBox Grid.Row="5" Grid.Column="2" Text="{Binding MobileNo1}"/>
<TextBox Grid.Row="5" Grid.Column="4" Text="{Binding MobileNo2}"/>
<TextBlock Grid.Row="7" Grid.Column="1" Text="Opening Balance " Style="{StaticResource txtBlock}"/>
<TextBlock Grid.Row="7" Grid.Column="1" Text=" : " HorizontalAlignment="Right" Style="{StaticResource txtBlock}"/>
<TextBox Grid.Row="7" Grid.Column="2" Text="{Binding OpeningBalance}"/>
<Grid Grid.Row="10" Grid.Column="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Save"
Command="{Binding DataContext.EditSaveCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"/>
<Button Grid.Column="3" Content="Cancel" HorizontalAlignment="Left"
Command="{Binding DataContext.EditCancelCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"/>
</Grid>
</Grid>
</Page>
The ViewModel:
namespace MiniAccountWPF.ViewModels.Masters
{
public class SalesAccountsViewModel: ViewModelBase, IModule
{
public SalesAccountsViewModel()
{
SessionViewModel.Instance.ModulesOpen.Add((IModule)this);
using (MiniAccountDBEntities db = new MiniAccountDBEntities())
{
Ledgers = new ObservableCollection<Ledger>(db.Ledgers.Where(x => x.LedgerType.LedgerTypeName == "Customer"));
}
EditCommand = new RelayCommand(Edit_Click);
EditSaveCommand = new RelayCommand(Edit_Save_Click);
EditCancelCommand = new RelayCommand(Edit_Cancel_Click);
}
~SalesAccountsViewModel()
{
SessionViewModel.Instance.ModulesOpen.Remove((IModule)this);
}
private ObservableCollection<Ledger> _ledgers;
public ObservableCollection<Ledger> Ledgers
{
get
{
return _ledgers;
}
set
{
_ledgers = value;
OnPropertyChanged("Ledgers");
}
}
private Ledger _selectedLedger;
public Ledger SelectedLedger
{
get
{
return _selectedLedger;
}
set
{
_selectedLedger = value;
OnPropertyChanged("SelectedLedger");
}
}
public ICommand EditCommand { get; set; }
private void Edit_Click(object obj)
{
var mainWindowVM = SessionViewModel.GetModuleInstance("MainWindow", "MiniAccountWPF.ViewModels.MainWindowViewModel");
((MainWindowViewModel)mainWindowVM).InnerSourcePage = ((MainWindowViewModel)mainWindowVM).SelectedChildMenuItem.EditFrameNavigationURL;
}
public ICommand EditSaveCommand { get; set; }
private void Edit_Save_Click(object obj)
{
using (MiniAccountDBEntities db = new MiniAccountDBEntities())
{
Ledger ledger = db.Ledgers.Single(x => x.LedgerID == SelectedLedger.LedgerID);
ledger.LedgerName = SelectedLedger.LedgerName;
ledger.City = SelectedLedger.City;
ledger.MobileNo1 = SelectedLedger.MobileNo1;
ledger.MobileNo2 = SelectedLedger.MobileNo2;
ledger.OpeningBalance = SelectedLedger.OpeningBalance;
db.SaveChanges();
var mainWindowVM = SessionViewModel.GetModuleInstance("MainWindow", "MiniAccountWPF.ViewModels.MainWindowViewModel");
((MainWindowViewModel)mainWindowVM).InnerSourcePage = ((MainWindowViewModel)mainWindowVM).SelectedChildMenuItem.SelectFrameNavigationURL;
}
}
public ICommand EditCancelCommand { get; set; }
private void Edit_Cancel_Click(object obj)
{
var mainWindowVM = SessionViewModel.GetModuleInstance("MainWindow", "MiniAccountWPF.ViewModels.MainWindowViewModel");
((MainWindowViewModel)mainWindowVM).InnerSourcePage = ((MainWindowViewModel)mainWindowVM).SelectedChildMenuItem.SelectFrameNavigationURL;
}
public string ModuleFriendlyName
{
get { return "SalesAccountsViewModel"; }
}
public string ModuleName
{
get { return "SalesAccounts"; }
}
}
}
Styles applied to DataGrid in ResourceDictionary:
<Style TargetType="{x:Type DataGrid}">
<Setter Property="GridLinesVisibility" Value="Vertical" />
<Setter Property="RowHeaderWidth" Value="0" />
</Style>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="{StaticResource BrushHeaderBackground}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="1,0" />
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="CanUserSort" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Background" Value="{StaticResource BrushOrangeSelector}" />
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True" />
<Condition Property="CanUserSort" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Background" Value="{StaticResource BrushBlueSelector}" />
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Gray" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontSize" Value="16" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource BrushBlueSelector}" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType='{x:Type DataGridRow}'>
<Setter Property="Background" Value="Gray" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource BrushBlueSelector}" />
</Trigger>
</Style.Triggers>
</Style>

the issue was view model, which was getting created with every view, leading to multiple copies of person collection
so I did place a property for VM in ServiceLocator for single instance and initialized the same
public ListViewModel ListViewModel {get; set;}
then I replaced the declaration of view model from the list view to point to this property
DataContext="{Binding ListViewModel, Source={x:Static vm:ServiceLocator.Instance}}"
this solves the problem of multiple instance of the collection but again datagrid has some problem redoing the selection so I added a style with datatrigger to reapply the selection
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
this trigger will ensure the row looks selected even if the page is reloaded.
here is a working sample
EDIT
here is a solution for the issue after merging Metro.xaml
remove DataGrid.RowStyle from the DataGrid in ListView and replace the mentioned styles in Metro.xaml with these
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="16" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType='{x:Type DataGridRow}'>
<Setter Property="TextElement.Foreground" Value="White" />
<Setter Property="Background" Value="Gray" />
<Setter Property="Height" Value="50" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFE1AF4D" />
<Setter Property="TextElement.Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>

It might have lost focus. I have seen similar problems where WPF controls are partially rendered.
Try putting the focus back to the target grid control.

WPF StackPanel Layout Question

I'm trying to create a layout similar to this:
alt text http://img20.imageshack.us/img20/3533/stackn.png
Here's the code I have:
<StackPanel TextBlock.FontFamily="Segoe UI" Orientation="Horizontal">
<StackPanel HorizontalAlignment="Stretch" Width="Auto">
<TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" />
</StackPanel>
<StackPanel>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Move">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</StackPanel>

Why don't you use a Grid for this?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Title}" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Move" />
</StackPanel>
</Grid>

I think you might be better off with a grid as your parent element. Omitting your styles and what not, here's the XAML for the layout in your drawing.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="50" /> <!-- or some other fixed width -->
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<!-- left hand stackpanel content -->
</StackPanel>
<StackPanel Grid.Column="1">
<!-- right hand StackPanel content -->
</StackPanel>
</Grid>

You don't really want a StackPanel for your red container. I'd go with a DockPanel, dock the rightmost blue panel to the right, and ensure LastChildFill is on to ensure the leftmost blue panel expands to the window width.

Here is the code for what I get from your post:
<DockPanel TextBlock.FontFamily="Segoe UI" LastChildFill="True">
<StackPanel DockPanel.Dock="Right">
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Move">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
<StackPanel HorizontalAlignment="Stretch" Width="Auto">
<TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" />
</StackPanel>
</DockPanel>
Hope this helps!!