We Keep Coding

C# WPF - Showing 15-20 User Controls with 4-6 TextBlocks each / Performance issues

I'm struggling with performance in my WPF application.
I have a ListView i populate with some buttons, which contain a bunch of TextBlocks with bindings.
I managed to get Virtualization going, so it seems the same whether its 20 or 2000 i load.
The problem is between 5 and 20. It simply appears that rendering a bunch of somewhat complicated User Controls, is simply too much for basic sub-par hardware.
This is how my Buttons/UserControls in my ListView looks ->
ListViewSample
I feel like WPF should be able to render this on sup-par hardware.
This is the xaml for the ListView:
<ListView ItemsSource="{Binding ButtonModels, IsAsync=True}"
Margin="0"
x:Name="ButtonsListView"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.VirtualizationMode="Recycling"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SnapsToDevicePixels="True"
Background="Transparent"
BorderThickness="0">
<ListView.Resources>
<Style TargetType="ScrollBar">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform CenterX="0" CenterY="0"
ScaleX="3" ScaleY="3" />
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<local:UniformGridPanel IsItemsHost="True" VerticalAlignment="Top" Height="Auto" Rows="4" Columns="{Binding Columns}" Margin="0">
</local:UniformGridPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Button Height="117" Width="Auto"
Margin="6,0,6,0"
x:Name="MasterButton"
Click="MasterButton_Click"
Visibility="{Binding IsVisible, Converter={StaticResource BoolToVis}}"
Template="{StaticResource ProductButtonTemplate}"
Padding="0">
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here is the xaml for the Button template:
<ControlTemplate TargetType="{x:Type Button}" x:Key="ProductButtonTemplate">
<UserControl>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="{Binding HeaderBrush}" CornerRadius="3,3,0,0">
<TextBlock VerticalAlignment="Center" FontSize="12"
Text="{Binding DisplayName}"
Foreground="{Binding FontIsWhite, Converter={StaticResource BoolToFontColour}}"
FontFamily="{StaticResource DefaultRegular}"
Padding="8,0,0,0"/>
</Border>
<Border Grid.Row="1" Background="{StaticResource LightGrey}" CornerRadius="0,0,4,4" BorderBrush="{StaticResource BorderGrey}" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
FontSize="12" TextTrimming="CharacterEllipsis" Text="Nr.:"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="0"
FontSize="10" TextTrimming="CharacterEllipsis" Text="{Binding Combinations}"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="0"
FontSize="10" TextTrimming="CharacterEllipsis" Text="{Binding SizeAndColour}"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<Grid Grid.Row="3" Grid.Column="0"
Width="24" Height="24"
VerticalAlignment="Center" HorizontalAlignment="Left"
Margin="8,0,0,0"
Visibility="{Binding ShowStockValue, Converter={StaticResource BoolToVis}}">
<Ellipse Fill="{Binding StockStatus, Converter={StaticResource EnumToBrush}}" Stroke="{StaticResource LightGrey}" StrokeThickness="0.1">
</Ellipse>
<TextBlock Text="{Binding Stock}"
Foreground="{StaticResource White}"
FontSize="9"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<TextBlock Grid.Row="0" Grid.Column="1"
FontSize="12" TextTrimming="CharacterEllipsis" Text="{Binding ProductNr}"
Foreground="{StaticResource Black}"
VerticalAlignment="Center" HorizontalAlignment="Right"
FontFamily="{StaticResource DefaultFont}"
Padding="0,0,8,0"/>
<Label Grid.Row="3" Grid.Column="1" FontSize="13"
Padding="0,0,8,8"
Content="{Binding Price}"
Foreground="{StaticResource Black}"
FontWeight="Bold"
FontFamily="{StaticResource DefaultFont}"
VerticalContentAlignment="Bottom" HorizontalContentAlignment="Right"
ContentStringFormat="{}{0:#,0.00}" />
</Grid>
</Border>
</Grid>
</UserControl>
</ControlTemplate>
tldr; I'm looking for performance tips on how to make this render faster. And this is BEFORE i reach a size in the ListView where my virtualization kicks in (Which works flawlessly)
Thanks in advance!

I managed to find a high performance solution - it just wasn't what i would expect to be better performing.
So instead of having one ListView with a binding, changing the data in the binding and repopulating the Listview, i just spawn a ListView for every collection i have.
It seems weird to me, that having a bunch of ListViews and just collapsing and showing them is more effcient, but it performs absolutely flawlessly.

Strange layout issue MVVM .Net 4.7.2 App controls disappear

I’m building a MVVM app using .Net 4.7.2 that works like a wizard (based on https://www.codeproject.com/KB/WPF/InternationalizedWizard.aspx?display=Print), so no additional frameworks, just the RelayCommand class, a MainWindow.cs that hosts the Main view (the view that has navigation items of the wizard on the left side, and the right side area that hosts the subviews which display based on the stage of the wizard).
Mi issue is that one of my users is experiencing a very strange behaviour with the controls. This is a sample photo of what the application should look like:
And this is a sample photo of what happens to the user. Notice that the image on the bottom left disappears, the bar on the bottom left also disappears, the heading and top text have moved up and clipped inside the window, and the rest of the content in the right side disappears.
Similar to the base InternationalizedWizard App I placed the controls in a grid that has horizontal + vertical alignment set to stretch. The
<Border Background="White" Grid.Column="1" Grid.Row="0">
<ScrollViewer>
<HeaderedContentControl Content="{Binding Path=CurrentPage}" Header="{Binding Path=CurrentPage.DisplayName}" />
</ScrollViewer>
</Border>
I applied this style to the HeaderedContentControl:
<Style TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel Margin="2,0">
<Grid Margin="1,1,1,12" RenderTransformOrigin="0.5,0.5">
<Rectangle Fill="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Height="3" Margin="10,-4" Opacity="0.6" RadiusX="8" RadiusY="8" VerticalAlignment="Bottom" />
<ContentPresenter ContentSource="Header" TextBlock.FontSize="22" TextBlock.FontWeight="DemiBold" TextBlock.Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" OpacityMask="Black" />
<Grid.Effect>
<DropShadowEffect Opacity="0.1" />
</Grid.Effect>
<Grid.RenderTransform>
<RotateTransform Angle="0" />
</Grid.RenderTransform>
</Grid>
<Grid>
<Rectangle Fill="{TemplateBinding Background}" />
<ContentPresenter ContentSource="Content" />
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The scrollviewer only scrolls up and down if the content is large, but in this case the content should fit fine so as expected the user won't see the scrollviewer.
The image from the bottom left that strangely disappear was placed in the column 0, row 0 of the grid a custom margin so it remains in that area:
<Image Grid.Column="0" Grid.Row="0" Source="..\Assets\SplashLogo.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" Stretch="None" Margin="20,20,20,20"/>
The first page (e.g. Welcome) that displays has another grid with two
<Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="30" MaxHeight="60"/>
<RowDefinition Height="*" MinHeight="200"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{x:Static res:Strings.SomeText_Description}" FontSize="15" FontWeight="Light" Margin="20,0,20,0" TextWrapping="Wrap" />
<StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Label Content="{x:Static res:Strings.WelcomeView_SomeText}" FontSize="15" FontWeight="Light" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,20,0" />
<TextBox Text="{Binding Path=SomeInput, UpdateSourceTrigger=PropertyChanged}" Height="25" Width="200" FontSize="15" FontWeight="Light" HorizontalAlignment="Left">
<TextBox.InputBindings>
<KeyBinding Key="Enter" Command="{Binding MoveNextFromWelcomeCommand}" CommandParameter="{Binding Path=Text, RelativeSource={RelativeSource AncestorType={x:Type TextBox}}}" />
</TextBox.InputBindings>
</TextBox>
</StackPanel>
</Grid>
But the contents of the stack panel completely disappear of view.
Finally, the bottom area of the main view is created in a border like this one, which also completely disappears from view:
<Border Grid.Column="0" Grid.Row="1" Background="LightGray" Grid.ColumnSpan="2">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="5" Margin="4" FontSize="15" Text="{Binding Path=ReportStatus}" VerticalAlignment="Center" Visibility="{Binding Path=ShowReportStatus}" />
<!-- NAVIGATION BUTTONS -->
<Grid Grid.Column="2" Grid.Row="0" Grid.IsSharedSizeScope="True" HorizontalAlignment="Right" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="0" Command="{Binding Path=MovePreviousCommand}" Style="{StaticResource movePreviousButtonStyle}" />
<Button Grid.Column="2" Grid.Row="0" Command="{Binding Path=MoveNextCommand}" Style="{StaticResource moveNextButtonStyle}" />
<Button Grid.Column="3" Grid.Row="0" Command="{Binding Path=CancelCommand}" Style="{StaticResource cancelButtonStyle}" />
</Grid>
</Grid>
</Border>
I initially thought there could be an issue with the version of .NET or OS, but my users has the latest version of Windows 10 Enterprise (10.0.17134) and dual screen with 1: 3840x2160 2: 2560x1600. I have tried to replicate that on my own computer but everything works fine for me. I also tested the App in Windows 7 and it works with no issues.
I really don't understand what could be happening, does it have anything to do with the user's DPI settings or any accessibility feature?
EDIT:
To make things a bit easier, this is the full code of the main view's xaml:
<UserControl x:Class="MyCompany.MyAppName.App.View.MyAppView"
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:local="clr-namespace:MyCompany.MyAppName.App.View"
xmlns:viewModel="clr-namespace:MyCompany.MyAppName.App.ViewModel"
xmlns:view="clr-namespace:MyCompany.MyAppName.App.View"
xmlns:res="clr-namespace:MyCompany.MyAppName.App.Assets"
xmlns:util="clr-namespace:MyCompany.MyAppName.App.Utils"
mc:Ignorable="d"
x:Name="configuratorControl" d:DesignHeight="600" d:DesignWidth="600"
>
<UserControl.Resources>
<util:PercentageConverter x:Key="percentageConverter"/>
<DataTemplate DataType="{x:Type viewModel:ObjectSelectionViewModel}">
<view:ObjectSelectionPageView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:CurrentObjectComponentsViewModel}">
<view:CurrentObjectComponentsView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:CurrentObjectOptionsViewModel}">
<view:CurrentObjectOptionsView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:SageFourViewModel}">
<view:SageFourView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:SageThreeViewModel}">
<view:SageThreeView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:ObjectViewModel}">
<view:MyNumberView/>
</DataTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Padding" Value="3.5,0" />
<Setter Property="Margin" Value="3.5" />
<Setter Property="MinWidth" Value="80" />
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Regular"/>
</Style>
<!-- This Style inherits from the Button style seen above. -->
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="moveNextButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_MoveNext}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsOnLastPage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.SageThreeView_Confirm}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsOnCreateSageThreePage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_CreateSageThree}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="cancelButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_Cancel}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsOnLastPage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_ExportPDF}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="movePreviousButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_MovePrevious}" />
</Style>
<!-- HEADERED CONTENT CONTROL STYLE -->
<Style TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel Margin="2,0">
<Grid Margin="1,1,1,12" RenderTransformOrigin="0.5,0.5">
<Rectangle Fill="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Height="3" Margin="10,-4" Opacity="0.6" RadiusX="8" RadiusY="8" VerticalAlignment="Bottom" />
<ContentPresenter ContentSource="Header" TextBlock.FontSize="22" TextBlock.FontWeight="DemiBold" TextBlock.Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" OpacityMask="Black" />
<Grid.Effect>
<DropShadowEffect Opacity="0.1" />
</Grid.Effect>
<Grid.RenderTransform>
<RotateTransform Angle="0" />
</Grid.RenderTransform>
</Grid>
<Grid>
<Rectangle Fill="{TemplateBinding Background}" />
<ContentPresenter ContentSource="Content" />
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="workflowStepTemplate">
<Border x:Name="bdOuter" BorderBrush="Black" BorderThickness="0,0,1,1" CornerRadius="12" Margin="1,1,1,12" Opacity="0.25" SnapsToDevicePixels="True">
<Border x:Name="bdInner" Background="White" BorderBrush="DarkBlue" BorderThickness="2,2,1,1" CornerRadius="12" Padding="2">
<TextBlock x:Name="txt" Margin="4,0,0,0" FontSize="15" FontWeight="Light" Text="{Binding Path=DisplayName}" />
</Border>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsCurrentPage}" Value="True">
<Setter TargetName="txt" Property="FontWeight" Value="SemiBold" />
<Setter TargetName="bdInner" Property="Background" Value="White" />
<Setter TargetName="bdOuter" Property="Opacity" Value="1" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</UserControl.Resources>
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}">
<Canvas x:Name="searchCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Panel.ZIndex="3" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}" Visibility="{Binding SearchBoxVisibility}">
<Grid Panel.ZIndex="4" Width="{Binding ActualWidth, ElementName=searchCanvas}" Height="{Binding ActualHeight, ElementName=searchCanvas}">
<StackPanel Panel.ZIndex="4" Orientation="Vertical" Width="270" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" >
<TextBlock Margin="5" FontSize="15" Text="Serial Number:" Width="100" Height="25" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Text="{Binding MyNumber, UpdateSourceTrigger=PropertyChanged}" Margin="5" Width="150" Height="25" />
</StackPanel>
<DockPanel HorizontalAlignment="Stretch">
<Button Margin="5" Content="Dismiss" Width="100" HorizontalAlignment="Left" Command="{Binding DismissSearchDraftCommand}"/>
<Button Margin="5" Content="Search" Width="100" HorizontalAlignment="Right" Command="{Binding StartSearchDraftCommand}"/>
</DockPanel>
</StackPanel>
<Rectangle Panel.ZIndex="3" Fill="LightBlue" Width="300" Height="100" />
</Grid>
<Rectangle Panel.ZIndex="2" Fill="LightGray" Opacity="0.4" Canvas.Left="0" Canvas.Top="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}" />
</Canvas>
<Grid Background="#11000000" Margin="1" Panel.ZIndex="2" IsEnabled="{Binding GridResultsEnabled}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="{Binding ActualHeight, ElementName=configuratorControl, Converter={StaticResource percentageConverter}, ConverterParameter=99.5}" Width="{Binding ActualWidth, ElementName=configuratorControl, Converter={StaticResource percentageConverter}, ConverterParameter=99.5}">
<Grid.BitmapEffect>
<BlurBitmapEffect Radius="{Binding GridBoxBlur}" KernelType="Box" />
</Grid.BitmapEffect>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<!-- Workflow step listing -->
<HeaderedContentControl Header="{x:Static res:Strings.MyAppView_HeaderSteps}">
<ItemsControl ItemsSource="{Binding Path=Pages}" ItemTemplate="{StaticResource workflowStepTemplate}" />
</HeaderedContentControl>
<Button FontSize="15" Style="{StaticResource HyperLinkButtonStyle}" Margin="20,20,20,140" VerticalAlignment="Bottom" HorizontalAlignment="Center" Content="{x:Static res:Strings.MyAppView_Button_Search_Full}" Command="{Binding Path=OpenSearchFullCommand}"/>
<Button FontSize="15" Style="{StaticResource HyperLinkButtonStyle}" Margin="20,20,20,170" VerticalAlignment="Bottom" HorizontalAlignment="Center" Content="{x:Static res:Strings.MyAppView_Button_Search_Draft}" Command="{Binding Path=OpenSearchDraftCommand}"/>
<Button Margin="20,295,20,20" Command="{Binding Path=StartAgainCommand}" Content="{x:Static res:Strings.SageThreeView_StartAgain}" VerticalAlignment="Top" />
<Image Grid.Column="0" Grid.Row="0" Source="..\Assets\SplashLogo.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" Stretch="None" Margin="20,20,20,20"/>
<!-- CURRENT PAGE AREA -->
<Border Background="White" Grid.Column="1" Grid.Row="0">
<ScrollViewer>
<HeaderedContentControl Content="{Binding Path=CurrentPage}" Header="{Binding Path=CurrentPage.DisplayName}" />
</ScrollViewer>
</Border>
<Border Grid.Column="0" Grid.Row="1" Background="LightGray" Grid.ColumnSpan="2">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="5" Margin="4" FontSize="15" Text="{Binding Path=SageThreeStatus}" VerticalAlignment="Center" Visibility="{Binding Path=ShowSageThreeStatus}" />
<!-- NAVIGATION BUTTONS -->
<Grid Grid.Column="2" Grid.Row="0" Grid.IsSharedSizeScope="True" HorizontalAlignment="Right" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="0" Command="{Binding Path=MovePreviousCommand}" Style="{StaticResource movePreviousButtonStyle}" />
<Button Grid.Column="2" Grid.Row="0" Command="{Binding Path=MoveNextCommand}" Style="{StaticResource moveNextButtonStyle}" />
<Button Grid.Column="3" Grid.Row="0" Command="{Binding Path=CancelCommand}" Style="{StaticResource cancelButtonStyle}" />
</Grid>
</Grid>
</Border>
</Grid>
</Canvas>
</UserControl>

Cant set 3 toggle button text content which use same style

i have three toggle buttons which use a singe style resource on wpf, now i cant set their content, content is declared more than once error, each toggle button has a different content.
Each toggle button uses an image as background also.
<UserControl.Resources>
<Style x:Key="Chromeless" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="197" Height="60">
<ContentPresenter TextElement.FontFamily="{TemplateBinding TextElement.FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,0,0,0"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Image x:Key="page1Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_1.png" Height="60" Width="197" />
<Image x:Key="page1" Source="/graph_engine;Component/cucaracha/LD3/button_1_pressed.png" Height="60" Width="197" />
<Image x:Key="page2Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_2.png" Height="60" Width="197" />
<Image x:Key="page2" Source="/graph_engine;Component/cucaracha/LD3/button_2_pressed.png" Height="60" Width="197" />
<Image x:Key="page3Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_3.png" Height="60" Width="197" />
<Image x:Key="page3" Source="/graph_engine;Component/cucaracha/LD3/button_3_pressed.png" Height="60" Width="197" />
</UserControl.Resources>
<Viewbox Stretch="Fill" StretchDirection="Both">
<Grid Height="60" Name="grid1" Width="591" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="197" />
<ColumnDefinition Width="197" />
<ColumnDefinition Width="197" />
</Grid.ColumnDefinitions>
<ToggleButton Style="{StaticResource Chromeless}" Name="page1" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Checked="page1_Checked" Unchecked="page1_Unchecked">
<DynamicResource ResourceKey="page1"/>
</ToggleButton>
<ToggleButton Grid.Column="1" Style="{StaticResource Chromeless}" Name="page2" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Unchecked="page2_Unchecked" Checked="page2_Checked">
<DynamicResource ResourceKey="page2"/>
</ToggleButton>
<ToggleButton Grid.Column="2" Style="{StaticResource Chromeless}" Name="page3" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Checked="page3_Checked" Unchecked="page3_Unchecked">
<DynamicResource ResourceKey="page3"/>
</ToggleButton>
</Grid>
</Viewbox>

Do you mean you can't change the image when you pressed down the toggle button? You only set a image to the content of toggle button. You can use Visual State Manager to change the background like this
If you just want to set the image and failed. Please check the image path.

Border is added only to the first text block in WPF

Edit : I realized what the problem is, when I add the border, The second TextBlock sits on top of the first TextBlock. Still have to figure out why this is happening.
Original question:
I have a number of TextBlocks in my xaml. I want to add a border around some textblocks. I tried the following methods.
Method 1:
<Style x:Key="BorderForTextBlock" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
<TextBlock1../>
<Border Style="{StaticResource BorderForTextBlock}">
<TextBlock2.../>
</Border>
Method 2:
<TextBlock1../> //This is where the border is added.
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock2 ..../> //This is where I want to add the border
</Border>
A border is added only to the first TextBlock in the xaml no matter to which TextBlock I add the border. I don't want the border on the first TextBlock. I have no clue why this is happening.
This is my xaml :
<Grid Background="LightYellow" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="3.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28*" ></RowDefinition>
<RowDefinition Height="120*" ></RowDefinition>
<RowDefinition Height="28*"></RowDefinition>
<RowDefinition Height="74*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="10,0,5,0" FontWeight="SemiBold" Text="{x:Static res:Resources.source1"/>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock x:Name="txtBlock1" FormatTest:FormattedTextBehavior.FormattedText="{Binding Path= content1}" Margin="0,0,0,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap"/>
</Border>
<TextBlock Grid.Row="1" Margin="10,0,5,0" FontWeight="SemiBold" Text="{x:Static res:Resources.source2}"/>
<RichTextBox Background="LightYellow" Margin="0,0,0,0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" Grid.Row="1" Grid.Column="1" IsReadOnly="True" >
<FlowDocument>
<Paragraph>
<Run Text="{Binding content2, Mode=TwoWay}"/>
</Paragraph>
</FlowDocument>
</RichTextBox>
<TextBlock Grid.Row="2" Margin="10,0,5,0" FontWeight="SemiBold" Text="{x:Static res:Resources.source3"/>
<TextBlock Text="{Binding content3, Mode=TwoWay}" Margin="0,0,0,0" Grid.Row="2" Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" TextWrapping="Wrap"/>
<TextBlock Grid.Row="3" Margin="10,0,5,0" FontWeight="SemiBold" Text="{x:Static res:Resources.source4}"/>
<TextBox Text="{Binding content4, Mode=TwoWay}" Margin="0,0,0,0" Grid.Row="3" Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True" TextAlignment="Left" TextWrapping="Wrap" Background="LightYellow" IsReadOnly="True"/>
</Grid>

instead of
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock x:Name="txtBlock1" FormatTest:FormattedTextBehavior.FormattedText="{Binding Path= content1}" Margin="0,0,0,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap"/>
</Border>
Have
<Border Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="1">
<TextBlock x:Name="txtBlock1" FormatTest:FormattedTextBehavior.FormattedText="{Binding Path= content1}" Margin="0,0,0,0" TextWrapping="Wrap"/>
</Border>
This should solve the issue with placement of text blocks
This is how it looks at my end
Try this and let us know

You can use style with trigger and put the style either in windows resources or app resources depending upon scope you want
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style x:Key="NotCalledBorder" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Height" Value="20"/>
<Setter Property="Width" Value="30"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Style="{StaticResource NotCalledBorder}" Grid.Row="0">
<TextBlock Text="test1" Grid.Row="0" OpacityMask="Black">
</TextBlock>
</Border>
<TextBlock Text="test2" Grid.Row="1"></TextBlock>
<Border Style="{StaticResource NotCalledBorder}" Grid.Row="2">
<TextBlock Text="test3" Grid.Row="2" OpacityMask="Black"></TextBlock>
</Border>
<TextBlock Text="test4" Grid.Row="3"></TextBlock>
</Grid>
</Window>
Conditional style in WPF. Adding border to two textblocks only. You can apply style and add to as many as you want

How to Change Pivot Header Template in Windows Phone 8

I would like to be able to change the background of the Pivot Headers and Application Title in Windows Phone 8. From what I gather, I must create a custom style targeting the Pivot control. I am not sure, however, to change the background of only the headers?
I would like to adjust the style somehow
<Style x:Key="MyPivotStyle" TargetType="phone:Pivot">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid CacheMode="BitmapCache" Grid.RowSpan="2">
<Grid.Background>
<ImageBrush ImageSource="/Assets/bg_header.png"/>
</Grid.Background>
</Grid>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Margin="24,17,0,-7">
<StackPanel Orientation="Horizontal">
<Image Source="/Assets/company_name.png" Width="213.75" HorizontalAlignment="Left" VerticalAlignment="Top" />
<Button HorizontalAlignment="Right" VerticalAlignment="Top" Margin="140,-20,0,35" BorderThickness="0" x:Name="btnHome">
<Image Source="/Assets/btnHome.png" Width="48" Height="48" ></Image>
</Button>
</StackPanel>
</ContentPresenter>
<controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Foreground="White" Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>

EDITED for WinRT (sorry for the delay and thanks for the reminder to update this answer):
To edit a full template right click on the control when in Document Outline and select Edit Template - Current (in Visual Studio or Blend) and the template will be generated for you and you can edit as you want, see my answer here for screenshots.
Here are the two examples below (posted in 2013) redone for Windows Phone Windows Runtime:
<Grid Background="Transparent">
<Pivot Title="Re-templating example">
<Pivot.HeaderTemplate>
<DataTemplate>
<Grid Background="Blue">
<TextBlock Text="{Binding}" />
</Grid>
</DataTemplate>
</Pivot.HeaderTemplate>
<Pivot.TitleTemplate>
<DataTemplate>
<Grid Background="Green">
<TextBlock Text="{Binding}" />
</Grid>
</DataTemplate>
</Pivot.TitleTemplate>
<PivotItem Header="One">
<TextBlock FontSize="35"
Text="This is item one" />
</PivotItem>
<PivotItem Header="Two">
<TextBlock FontSize="35"
Text="This is item 2" />
</PivotItem>
</Pivot>
</Grid>
And second example, notice that we are wrapping the ContentPresenter in a Grid (you could use a border as well or any other element):
<Page.Resources>
<SolidColorBrush x:Key="PivotBackground" Color="#FFE46C08"/>
<Style x:Key="PivotStyle" TargetType="Pivot">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Notice that ContentControl is wrapped in a Grid and Background set to resource furtehr up-->
<Grid VerticalAlignment="Center" Background="{StaticResource PivotBackground}">
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
</Grid>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<!--Background set to resource further up-->
<PivotHeaderPanel Background="{StaticResource PivotBackground}" x:Name="Header" >
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
Using the above style:
<Grid Background="Transparent">
<Pivot Style="{StaticResource PivotStyle}"
Title="Re-templating example">
<PivotItem Header="One">
<TextBlock FontSize="35" Text="This is item one" />
</PivotItem>
<PivotItem Header="Two">
<TextBlock FontSize="35" Text="This is item 2"/>
</PivotItem>
</Pivot>
</Grid>
By the way, it's usually preferred to keep styles in a separate style file- I've only kept them on the same page for simplicity for this example. If you remove the x:key attribute the style will be applied to all the controls of the set target type (Pivot in this example).
Answer from 2013 for Windows Phone 7.X and Windows Phone 8 (WP Silverlight:
There are a few ways you can do it, but here is one example:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<phone:Pivot Grid.Row="1">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid Background="Red" Height="200">
<TextBlock Text="{Binding}"/>
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="Test">
<TextBlock Text="ghjgb"/>
</phone:PivotItem>
<phone:PivotItem Header="Test">
<TextBlock Text="ghjgb"/>
</phone:PivotItem>
</phone:Pivot>
If you however want to do this:
You can do this, remove the x:key to apply to all pivoits, or use the key to set the style on just selected pivoit elements like so:
<controls:Pivot Title="The Marathon Runner" Style="{StaticResource PivotStyle}">
<Style x:Key="PivotStyle" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#ff9000" CacheMode="BitmapCache" Grid.RowSpan="2" />
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"
Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Dont forget to use:
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:Primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"