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.

How to move canvas?

I am using canvas within which there are several controls.
I want to allow user a facility to easily drag and drop canvas anywhere within the control.
How can i move canvas with name myCanvas?
Below is the xml code:
<UserControl x:Class="EMap.Windows.MainWindowNew"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:src="clr-namespace:EMap"
d:DesignHeight="500" d:DesignWidth="1000" Background="#FF3E3E40">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120*"/>
<ColumnDefinition Width="121*"/>
<ColumnDefinition Width="285*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="49*"/>
<RowDefinition Height="101*"/>
</Grid.RowDefinitions>
<Canvas Name="myCanvas" Height="800" Background="Aqua"
Grid.Row="0" Grid.RowSpan="2" Panel.ZIndex="1" Opacity="0.5" Canvas.Left="0" Canvas.Top="0">
<Label Content="Lattitude" Foreground="Black" Padding="5"/>
<Label Content="Longitude" Foreground="Black" Padding="5" Canvas.Top="25"/>
<Label Content="Camera Name" Foreground="Black" Padding="5" Canvas.Top="50"/>
<Border Canvas.Left="85" Padding="2"
VerticalAlignment="Center"
BorderBrush="Green"
BorderThickness="1">
<TextBox x:Name="Lattitude" Background="Black" TextWrapping="Wrap" Width="119" Foreground="White"/>
</Border>
<Border Canvas.Left="85" Canvas.Top="25" HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="1"
BorderBrush="Green"
BorderThickness="1">
<TextBox Name="Longitude" Background="Black" TextWrapping="Wrap" Width="119" Foreground="White"/>
</Border>
<Border Canvas.Left="85" Canvas.Top="50" HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="1"
BorderBrush="Green"
BorderThickness="1">
<TextBox Name="camName" Background="Black" TextWrapping="Wrap" Width="119" Foreground="White"/>
</Border>
<Button Name="PlaceCamera" Content="Place Camera" Foreground="Black"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="Transparent"
Canvas.Left="110" Canvas.Top="75" Click="PlaceCamera_Click"/>
<Button Name="RemoveCamera" Content="Remove Camera" Foreground="Black"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="Transparent"
Canvas.Left="110" Canvas.Top="100" Click="RemoveCamera_Click"/>
<Button Name="GetAllCamera" Content="Get all Cameras" Foreground="Black"
HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="Transparent"
Canvas.Left="110" Canvas.Top="125" Click="GetAllCamera_Click"/>
</Canvas>
<GroupBox Name="mapgroup" Panel.ZIndex="0" Background="Teal"
Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="3"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<src:Map x:Name="MainMap" CanDragMap="False" Zoom="13" MaxZoom="24" MinZoom="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</GroupBox>

Positioning texblocks in control template

Im trying to make exclamation mark next to the text for validation exception.
There is my custom template there is my XAML:
<Window x:Class="WpfApplicationLAB.NewGameWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplicationLAB"
mc:Ignorable="d"
Height="80" Width="260"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
AllowsTransparency="False"
Title="NewGameWindow"
ResizeMode="CanResize" MinWidth="180" MinHeight="90">
<Grid Name="GridInputName">
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="29*"/>
<RowDefinition Height="28*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="51*"/>
<ColumnDefinition Width="121*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Content="Size:" HorizontalContentAlignment="Center"/>
<TextBox Name="textBox" Grid.Row="1" Grid.Column="1">
<TextBox.Text>
<Binding Path="Ssize" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<local:SizeValidation/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<Button Name="Cancel"
Grid.Row="2" Grid.Column="0" Content="Cancel" Click="Cancel_Click" >
</Button>
<Button Name="Ok"
Grid.Row="2" Grid.Column="1" Content="Ok" Click="Ok_Click">
</Button>
</Grid>
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<Border Background="Red" Margin="0,0,0,0" Width="20" Height="20" CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" Foreground="white">
</TextBlock>
</Border>
<TextBlock
Margin="5,0,0,0"
Foreground="Red"
Text="{Binding ElementName=MyAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
</TextBlock>
<Border BorderBrush="Red" BorderThickness="1" Margin="5,0,5,0" >
<AdornedElementPlaceholder Name="MyAdorner" ></AdornedElementPlaceholder>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
</Window>
I want the exclamation mark on the left side of the text, I can't reach it anyway i try, with stack panel and it's orientation changed, dock panels etc.
With this code it looks that:
in some different variables it can be on the left side of the textbox
Any tips?

Try to wrap the Border with Background="Red" and the TextBlock with Foreground="Red" in a StackPanel with Orientation="Horizontal".
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Border Background="Red"
Margin="0"
Width="20"
Height="20"
CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!"
VerticalAlignment="center"
HorizontalAlignment="center"
FontWeight="Bold"
Foreground="white"/>
</Border>
<TextBlock Margin="5,0,0,0"
Foreground="Red"
Text="{Binding ElementName=MyAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/>
</StackPanel>
<Border BorderBrush="Red" BorderThickness="1" Margin="5,0" >
<AdornedElementPlaceholder Name="MyAdorner"/>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This worked for me.
PS: did you realize that you wrote MinHeight="90"... and then Height="80"? Does it make sense for you?

WPF get ListView height in C# when Window Size is changed

I have the following Question:
I have a Layout with a Grid and ListViews.
These ListViews will always contain 5 Items.
Now these Items should fill the complete Height of the ListView.
So I thought I get the Height of the ListView an then devide it by 5 and set the Height of each Row to the Result.
But the ListView.Height Property returns strange Values.
I listen to the Window SizeChanged Event.
I hope somebody can tell me how to do it, or if there is a better alternative.
<Window x:Class="KalenderDesingTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Kalender" Height="600" Width="800" SizeChanged="Window_SizeChanged">
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="#5076A7" BorderThickness="1" CornerRadius="4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0"/>
<GradientStop Color="#C0D3EA" Offset="1.0"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel TextElement.FontFamily="Segoe UI"
TextElement.FontSize="12">
<TextBlock FontWeight="Bold" Padding="3,0,0,0" Text="{Binding Path=Name}"/>
<TextBlock Padding="3,0,0,0" Text="{Binding Path=Age}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0"
Grid.RowSpan="3" x:Name="NeuerTermin">Neuer Termin</Button>
<Button Grid.Column="2" Grid.Row="0" x:Name="Back">Zurück</Button>
<ComboBox Grid.Column="3" Grid.Row="0" x:Name="Month"></ComboBox>
<Button Grid.Column="4" Grid.Row="0" x:Name="Forward">Vor</Button>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Montag" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" Grid.Row="1" Text="Dienstag" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="3" Grid.Row="1" Text="Mittwoch" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="4" Grid.Row="1" Text="Donnerstag" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="5" Grid.Row="1" Text="Freitag" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" Grid.Column="1"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="MoV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="MoN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="MoT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="DiV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="DiN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="DiT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="3"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="MiV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="MiN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="MiT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="4"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="DoV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="DoN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="DoT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="5"
Grid.Row="2" VerticalAlignment="Stretch">
<CheckBox x:Name="FrV" VerticalAlignment="Center" Margin="0,0,5,0">V</CheckBox>
<CheckBox x:Name="FrN" VerticalAlignment="Center" Margin="0,0,5,0">N</CheckBox>
<CheckBox x:Name="FrT" VerticalAlignment="Center">T</CheckBox>
</StackPanel>
<ListView Grid.Column="1" Grid.Row="3" x:Name="lvMoV"></ListView>
<ListView Grid.Column="1" Grid.Row="4" x:Name="lvMoN"></ListView>
<ListView Grid.Column="2" Grid.Row="3" x:Name="lvDiV"></ListView>
<ListView Grid.Column="2" Grid.Row="4" x:Name="lvDiN"></ListView>
<ListView Grid.Column="3" Grid.Row="3" x:Name="lvMiV"></ListView>
<ListView Grid.Column="3" Grid.Row="4" x:Name="lvMiN"></ListView>
<ListView Grid.Column="4" Grid.Row="3" x:Name="lvDoV"></ListView>
<ListView Grid.Column="4" Grid.Row="4" x:Name="lvDoN"></ListView>
<ListView Grid.Column="5" Grid.Row="3" x:Name="lvFrV"></ListView>
<ListView Grid.Column="5" Grid.Row="4" x:Name="lvFrN"></ListView>
</Grid>
</Window>
This is my code behind:
private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
int wHeight = (int)lvMoN.Height;
}

I would do like this:
int wHeight = (int)lvMoN.ActualHeight;

Grid Border / Gap between cells

I've created a ControlTemplate that contains a Grid with two rows.
Sadly, there appears to be a single pixel gap between the cells.
How do I remove the gap?
Here's a screenshot showing the gap:
...and here's the XAML:
<Window x:Class="MAQButtonTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="695" Width="996">
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="OverridesDefaultStyle" Value="True"/>
</Style>
<ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
<Grid Width="444" Margin="0" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97">
<TextBlock>This is the first piece of text</TextBlock>
</Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter Grid.Row="0" />
</Grid>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#e9f1f6"></Grid>
<Grid Grid.Column="1" Background="#d2e3ed">
<StackPanel>
<TextBlock FontFamily="Segoe UI" FontSize="22" FontWeight="Medium" Margin="52,58,0,0" Foreground="#0c3d5d">Your Quizzes <TextBlock FontFamily="Segoe UI" FontSize="18" FontWeight="Medium" Foreground="#0c3d5d">(7)</TextBlock></TextBlock>
<Grid Margin="0,20,0,0">
<Button Width="444" Background="{x:Null}" BorderThickness="0" Template="{StaticResource ButtonTemplate}" Click="DoSomething" BorderBrush="#032135">
<TextBlock Margin="6,2.8,0,0" FontFamily="Segoe UI" FontSize="19" Foreground="#032135" FontWeight="Medium">This is a second piece of text</TextBlock>
</Button>
</Grid>
</StackPanel>
</Grid>
</Grid>
</Window>

Just add SnapsToDevicePixels="True" in your template grid
<ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
<Grid Width="444" Margin="0" ShowGridLines="False" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97">
<TextBlock>This is the first piece of text</TextBlock>
</Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter Grid.Row="0" />
</Grid>
</Grid>
</ControlTemplate>

Set
SnapsToDevicePixels="True"
On grids in template or button, but better just create new style with SnapsToDevicePixels="True" setter and template inside style.