C# WPF UI freeze while datatable binding with Listbox - c#

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.

Related

List view checkbox not getting updated

I have list view in which I have a checkbox "ALL" when I select/unselect "ALL" ,all below checkboxes under "ALL" get selected/unselected. but if list is long ,unselecting "ALL" is not unselecting all below items. Please find the code and suggest if i am missing some property?
<ListView BorderThickness="0" >
<ListViewItem>
<CheckBox Content="{x:Static resources:Resources.SelectAll}"
Height="20"
Margin="0"
VerticalContentAlignment="Center"
Click="checkBox_SelectAll_Click" >
<CheckBox.Style>
<Style TargetType="CheckBox">
<Setter Property="IsChecked"
Value="{x:Null}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsAllSelected}"
Value="true">
<Setter Property="IsChecked"
Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsNoneSelected}"
Value="true">
<Setter Property="IsChecked"
Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</CheckBox.Style>
</CheckBox>
</ListViewItem>
</ListView>
<ListView ItemsSource="{Binding Path=FilterItems}"
MaxHeight="90"
SelectionMode="Multiple"
BorderThickness="0"
ScrollViewer.HorizontalScrollBarVisibility="Hidden">
Filter items code .here for comboBox_FilterByBrand I want select/unselect "ALL" to work.
<telerik:RadSplitButton.DropDownContent>
<StackPanel Margin="7"
Width="250"
Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0"
Orientation="Horizontal">
<TextBlock Text="{x:Static resources:Resources.Filter}"
Foreground="DarkGray" />
<TextBlock Text=" ("
Foreground="DarkGray" />
<TextBlock Text="{Binding Path=DisplayingCurrentCount}"
Foreground="DarkGray" />
<TextBlock Text="/"
Foreground="DarkGray" />
<TextBlock Text="{Binding Path=DisplayingTotalCount}"
Foreground="DarkGray" />
<TextBlock Text=")"
Foreground="DarkGray" />
</StackPanel>
<Button Name="button_ClearFilters"
Grid.Column="1"
Padding="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left"
Content="{x:Static resources:Resources.ClearFilters}"
Foreground="DarkGray"
Background="Transparent"
BorderBrush="Transparent"
Style="{StaticResource ClearFilterButtonStyle}"
Command="{Binding ClearFiltersButtonCommand}" />
</Grid>
<Controls:FilterControl x:Name="comboBox_FilterByBrand"
HasSeparator="True"
Header="{x:Static resources:Resources.FilterByBrand}"
Type="{x:Static resources:Constants.Filter_By_Brand}"
FilterItems="{Binding BrandFilterItems, IsAsync=True}"
IsAllSelected="{Binding BrandFilterIsAllSelected, Mode=TwoWay}"
IsNoneSelected="{Binding BrandFilterIsNoneSelected, Mode=TwoWay}"
FilterChanged="{Binding FilterSelectionChangedCommand, IsAsync=True}"/>
</StackPanel>

Space inside the button control

I have button according to language selection
Ex:English1
Portugese
i need to show space in left and right side of the content in button?
This is my xaml code
<StackPanel Orientation="Horizontal" Grid.Row="6" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Style="{StaticResource LoginButtonStyle}" Margin="10,0,15,20" Content="{x:Static strings:Resources.Login}" Command="{Binding LoginCmd}"
IsDefault="True" MinWidth="90" Padding="5,5,5,5"
IsEnabled="{Binding LoginEnabled,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
Please check this is my code snippet.Inside grid row 6 i added stackpanel for button
<Border BorderThickness=".5" Width="449.629" Height="570" BorderBrush="Gray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Row="0" Content="{Binding}"></ContentPresenter>
<StackPanel Grid.Row="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.RowSpan="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="{x:Static strings:Resources.STR_USER_NAME}" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book15pt}" Margin="40,17,20,0"/>
<telerik:RadWatermarkTextBox x:Name="Login_UserName" BorderThickness="0" Grid.Row="0" Grid.Column="1" MaxHeight="100" WatermarkContent="Enter User Name" Margin="0,15,30,15" MaxLength="20"
Text="{Binding UserName, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True, ValidatesOnExceptions=True}" Background="#FFE6E6E6" Foreground="#FF666666"
Width="205" Style="{StaticResource TextBox_ValidationTemplate}" Validation.ErrorTemplate="{StaticResource TextBoxErrorTemplate}" FontSize="15" Height="25"
HorizontalAlignment="Center" LostFocus="Login_UserName_LostFocus">
<telerik:RadWatermarkTextBox.WatermarkTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Style="{StaticResource CentraleSansCnd-Book15pt}" FontStyle="Normal" />
</DataTemplate>
</telerik:RadWatermarkTextBox.WatermarkTemplate>
</telerik:RadWatermarkTextBox>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{x:Static strings:Resources.STR_PASSWORD}" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book15pt}" Margin="40,5,20,0"/>
<PasswordBox x:Name="Login_Password" BorderThickness="0" MaxLength="20" Height="25" Grid.Row="1" Grid.Column="1" Background="#FFE6E6E6" Foreground="#FF666666"
FontSize="15" FontStyle="Normal" IsEnabled="{Binding NewMode}"
common:PasswordBoxAssistant.BindPassword="true" HorizontalAlignment="Center" Width="205" Margin="00,0,30,15" Validation.ErrorTemplate="{StaticResource TextBoxErrorTemplate}"
common:PasswordBoxAssistant.BoundPassword="{Binding Path=Password,Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True, ValidatesOnExceptions=True}" LostFocus="Login_Password_LostFocus">
</PasswordBox>
<TextBlock Grid.Row="2" Grid.Column="0" Text="{x:Static strings:Resources.SERVER_NAME}" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book15pt}" Margin="40,5,20,0"/>
<telerik:RadComboBox Style="{StaticResource RadComboBoxStyle}" Margin="00,0,30,15" Grid.Row="2" Grid.Column="1" ItemsSource="{Binding ServerNameColl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="205" Height="25" Text="{Binding SelectedServerName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center"></telerik:RadComboBox>
</Grid>
<StackPanel Orientation="Vertical" Grid.Row="3" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="40,0,30,5" >
<TextBlock Text="{x:Static strings:Resources.SERVER_IP}" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book15pt}" />
<TextBlock Margin="5,0,0,0" Text="{Binding ServerIP, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book15pt}" FontStyle="Italic" />
</StackPanel>
<StackPanel Margin="40,0,10,20" >
<TextBlock>
<Hyperlink Command="{Binding ServerSettingsCmd}" Style="{StaticResource HyperLinkStyle-CentraleSansCnd-Book15pt}">
<Run Text="{x:Static strings:Resources.SERVER_SETTINGS}"/>
</Hyperlink>
</TextBlock>
</StackPanel>
</StackPanel>
<TextBlock Grid.Row="4" Grid.ColumnSpan="2" Text="{Binding ErrorMsg, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MaxHeight="10" TextWrapping="Wrap" ></TextBlock>
<Grid Grid.Row="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox Style="{StaticResource CheckBoxStyle}" Margin="40,7,30,0" Content="{x:Static strings:Resources.REMEMBERME}" IsChecked="{Binding RememberMe}" MinWidth="150" />
<TextBlock Padding="7" Grid.Row="0" Grid.Column="1">
<Hyperlink Command="{Binding ForgotPwdCmd}" Style="{StaticResource HyperLinkStyle-CentraleSansCnd-Book15pt}" >
<Run Text="{x:Static strings:Resources.FORGOTPWD}"/>
</Hyperlink>
</TextBlock>
</Grid>
<!--<StackPanel Grid.Row="5" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="40,0,0,10" >
</StackPanel>-->
<StackPanel Orientation="Horizontal" Grid.Row="6" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Style="{StaticResource GrayButtonStyle}" Margin="5,0,15,20" Content="{x:Static strings:Resources.CANCEL}" IsCancel="True" MinWidth="90"/>
<Button Style="{StaticResource LoginButtonStyle}" Margin="10,0,15,20" Content="{x:Static strings:Resources.Login}" Command="{Binding LoginCmd}"
IsDefault="True" MinWidth="90" Padding="5,5,5,5"
IsEnabled="{Binding LoginEnabled,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
<StackPanel Grid.Row="7" Orientation="Vertical" >
<Line Stroke="Black" StrokeThickness="1" X1="0" X2="449.629" ></Line>
<Grid Margin="40,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Margin="0,10,5,0" Grid.Row="0" Grid.Column="0" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book15pt}" HorizontalAlignment="Right"
Text="{x:Static strings:Resources.STR_SOFTWARE_VERSION}"></TextBlock>
<TextBlock Margin="5,10,5,2" Grid.Row="0" Grid.Column="1" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book14pt}"
Text="{Binding AssemblyVersion}"></TextBlock>
<TextBlock Margin="0,2,5,0" Grid.Row="1" Grid.Column="0" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book15pt}" HorizontalAlignment="Right"
Text="{x:Static strings:Resources.STR_SW_SERIALNO}"></TextBlock>
<TextBlock Margin="5,5,5,2" Grid.Row="1" Grid.Column="1" Style="{StaticResource TextBlockStyle-CentraleSansCnd-Book14pt}"
Text="{Binding SerialNumber}"></TextBlock>
</Grid>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</Border>
This is for style
<Style x:Key="LoginButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Height" Value="36" />
<Setter Property="MaxWidth" Value="200" />
<!--<Setter Property="Width" Value="120" />-->
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="Gray"></Setter>
<Setter Property="BorderBrush" Value="White"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="3" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"
Style="{StaticResource CentraleSansCnd-Book17pt}"></TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="1" />
<Condition Binding="{Binding LoginEnabled,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FF9741D1"></Setter>
<Setter Property="BorderBrush" Value="#FF5F0099"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="2" />
<Condition Binding="{Binding LoginEnabled,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FF209E8C"></Setter>
<Setter Property="BorderBrush" Value="#FF005D4F"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="3" />
<Condition Binding="{Binding LoginEnabled,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FF0074DF"></Setter>
<Setter Property="BorderBrush" Value="#FF0046A8"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="4" />
<Condition Binding="{Binding LoginEnabled,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FF7AAD00"></Setter>
<Setter Property="BorderBrush" Value="#FF437800"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="5" />
<Condition Binding="{Binding LoginEnabled,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FFFF9D2A"></Setter>
<Setter Property="BorderBrush" Value="#FFC96800"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="3" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FF3FA7EF"></Setter>
<Setter Property="BorderBrush" Value="#FF005D4F"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="1" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FFD177FF"></Setter>
<Setter Property="BorderBrush" Value="#FF9741D1"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="2" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FF60D5C1"></Setter>
<Setter Property="BorderBrush" Value="#FF209E8C"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="4" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FFB2E44C"></Setter>
<Setter Property="BorderBrush" Value="#FF7AAD00"></Setter>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding App}" Value="5" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#FFFFB847"></Setter>
<Setter Property="BorderBrush" Value="#FFE98300"></Setter>
</MultiDataTrigger>
</Style.Triggers>
</Style>
Style for CentraleSansCnd-Book17pt
<Style x:Key="CentraleSansCnd-Book17pt">
<Setter Property="TextElement.FontFamily" Value="Resources/#CentraleSansCnd-Book" />
<Setter Property="TextElement.FontSize" Value="17" />
</Style>

Yes ,I got the answer.
inside the style there is one template.Here in Border tag i added padding property.Its solved my problem
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="3" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Padding="10,0,10,0">
<TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"
Style="{StaticResource CentraleSansCnd-Book17pt}"></TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
Thanks all

Add "Margin" on your button style.
<Style x:Key="LoginButtonStyle" TargetType="{x:Type Button}">

WPF data binding to a parent property inside HierarchicalDataTemplate

I have the following data template in my listbox:
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF575757" BorderThickness="0,0,0,1">
<Grid HorizontalAlignment="Stretch" Tag="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" SharedSizeGroup="Name"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="DeviceIcon" DataContext="{Binding Path=device}" Source="{Binding Path=StatusIcon}" Width="64" Height="64" Grid.Column="0" Grid.RowSpan="2" RenderOptions.BitmapScalingMode="HighQuality" Margin="3"></Image>
<StackPanel Grid.Column="1" >
<TextBlock x:Name="DeviceName" DataContext="{Binding Path=device}" Text="{Binding Path=DeviceName}" FontWeight="Bold" Foreground="#FF00008F" FontSize="14.667"/>
<TextBlock x:Name="PluginName" Text="{Binding Path=PluginName}" />
</StackPanel>
<Menu x:Name="MainMenu" VerticalAlignment="Top" Padding="0,3" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding deviceMenu}">
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Items}">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Image Source="{Binding Icon}" Width="16" Height="16">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding Icon}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Text="{Binding Text}"/>
</StackPanel>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
<Menu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Command" Value="{Binding ClickCommand}" />
<Setter Property="CommandParameter" Value="{Binding device}" />
</Style>
</Menu.ItemContainerStyle>
</Menu>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
The MenuItem's are bound to a property named deviceMenu in the root object. But the root object also contains a property called device which needs to be mapped to the CommandParameter property.
So how do I reach up and out of deviceMenu back to the parent object to access its properties?

Blame it on fatigue... The answer was pretty simple:
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=DataContext.device}" />

Making XAML Grid width full screen

I m creating Windows Phone 8.1 app with Visual Studio Where I m putting XAML grid but could not make full width. If I give width to each column then grid will be not full width in all resolution of Phone
My codes are as below
<ListView Name="lvData" Margin="5,0" HorizontalAlignment="Stretch" Grid.Row="2" BorderBrush="Black"
BorderThickness="1" Foreground="#000" VerticalAlignment="Center">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<GridViewHeaderItem Grid.Column="0" x:Uid="_Number" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="1" x:Uid="_Dep" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="2" x:Uid="Arr" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="3" x:Uid="CurrentStatus" Style="{StaticResource GridViewHeader}" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<GridViewItem Grid.Column="0" Style="{StaticResource GridViewItem}" Content="{Binding Number}"/>
<GridViewItem Grid.Column="1" Style="{StaticResource GridViewItem}" Content="{Binding DepTime}" />
<GridViewItem Grid.Column="2" Style="{StaticResource GridViewItem}" Content="{Binding ArrTime}"/>
<GridViewItem Grid.Column="3" Style="{StaticResource GridViewItem}" Foreground="{Binding Color}" Content="{Binding CurrentStatus}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My Style
<Style TargetType="GridViewHeaderItem" x:Key="GridViewHeader">
<Setter Property="Background" Value="#48649F"/>
<Setter Property="Foreground" Value="#fff"/>
<Setter Property="Height" Value="40"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style TargetType="GridViewItem" x:Key="GridViewItem">
<Setter Property="Foreground" Value="#000"/>
<Setter Property="BorderBrush" Value="#000"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="40"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>

Try stretch HorizontalContentAlignment of ListViewItem:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
...
</ListView>

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!!

Categories

Resources