Generic.xaml doesn't use SystemParameters set in App.xaml

Question

To customize the look of ScrollBar I've set these:

<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">15</sys:Double>
<sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">15</sys:Double>

in App.xaml and in the Themes\Generic.xaml some of my Custom Controls have Grid.Column defined like this:

<ColumnDefinition Width="{Binding Source={x:Static SystemParameters.VerticalScrollBarWidth}}"/> 

Looks like my Custom Controls actually don't use 15 as Width. Is there any way to force Custom Controls Styles defined in Themes\Generic.xaml use these values set in App.xaml?

EDIT

Here's what I've in App.xaml now:

<Application x:Class="RentManager.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:RentManager"
             xmlns:sys="clr-namespace:System;assembly=System.Runtime"
             xmlns:cc="clr-namespace:RentManager.CustomControl"
             xmlns:con="clr-namespace:RentManager.Common"
             StartupUri="Main.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">12</sys:Double>
            <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">12</sys:Double>

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/RentManager;component/Themes/Generic.xaml" />
                <ResourceDictionary Source="pack://application:,,,/RentManager;component/Themes/OtherStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

The userControl on which I'm having issue looks like this when scrollbar appears:

Look at the Misalignment in the Receivable/Payment column. Here's how it looks without scrollbar:

The custom control for Ledger is:

<Style TargetType="{x:Type local:Ledger}">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:Ledger}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="{Binding Source={x:Static SystemParameters.VerticalScrollBarWidth}}"/>
                            </Grid.ColumnDefinitions>

                            <Grid.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Grid.Row" Value="1"/>
                                    <Setter Property="FontWeight" Value="Bold"/>
                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                </Style>
                            </Grid.Resources>

                            <Border Grid.Row="1" Grid.ColumnSpan="5" Background="AliceBlue"/>
                            <Separator Grid.Row="0" Grid.ColumnSpan="5"/>
                            <TextBlock Text="Date" Margin="20 0 0 0"/>
                            <TextBlock Grid.Column="1" Text="Particulars"/>
                            <TextBlock Grid.Column="2" HorizontalAlignment="Right">
                    <Run Text="Receivable"/>
                    <LineBreak/>
                    <Run Text="/ Payment"/>
                            </TextBlock>
                            <TextBlock Grid.Column="3" HorizontalAlignment="Right" Text="Receipt"/>
                            <TextBlock Grid.Column="4" HorizontalAlignment="Right" Text="Balance" Margin="0 0 20 0"/>
                            <Separator Grid.Row="2" Grid.ColumnSpan="5"/>
                        </Grid>

                        <ItemsControl Grid.Row="1"
                                      ItemsSource="{TemplateBinding Source}"
                                      HorizontalContentAlignment="Stretch"
                                      VirtualizingStackPanel.IsVirtualizing="True"
                                      VirtualizingStackPanel.VirtualizationMode="Recycling"
                                      ScrollViewer.CanContentScroll="True">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.Template>
                                <ControlTemplate>
                                    <ScrollViewer VerticalScrollBarVisibility="Auto" x:Name="scroll">
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </ControlTemplate>
                            </ItemsControl.Template>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid >
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="100"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="100"/>
                                            <ColumnDefinition Width="100"/>
                                            <ColumnDefinition Width="100"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>

                                        <TextBlock Grid.Column="0" Text="{Binding Date, StringFormat='dd MMM yyyy'}" Margin="20 0 0 0"/>
                                        <ContentControl Grid.Column="1">
                                            <ContentControl.Style>
                                                <Style BasedOn="{StaticResource {x:Type ContentControl}}" TargetType="ContentControl">
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding DataContext.SelectedTab.Type, RelativeSource={RelativeSource AncestorType={x:Type local:Ledger}}}" Value="Plot">
                                                            <Setter Property="Content">
                                                                <Setter.Value>
                                                                    <TextBlock TextWrapping="Wrap">
                                                                        <Run Text="{Binding SpaceName}"/>
                                                                        <Run Text=": "/>
                                                                        <Run Text="{Binding TenantName}"/>
                                                                        <Run Text=" - "/>
                                                                        <Run Text="{Binding HeadName}"/>
                                                                        <Run Text=" | "/>
                                                                        <Run Text="{Binding Narration}" FontStyle="Italic" Foreground="Blue"/>
                                                                    </TextBlock>
                                                                </Setter.Value>
                                                            </Setter>
                                                        </DataTrigger>

                                                        <DataTrigger Binding="{Binding DataContext.SelectedTab.Type, RelativeSource={RelativeSource AncestorType={x:Type local:Ledger}}}" Value="Space">
                                                            <Setter Property="Content">
                                                                <Setter.Value>
                                                                    <TextBlock TextWrapping="Wrap">
                                                                        <Run Text="{Binding PlotName}"/>
                                                                        <Run Text=": "/>
                                                                        <Run Text="{Binding TenantName}"/>
                                                                        <Run Text=" - "/>
                                                                        <Run Text="{Binding HeadName}"/>
                                                                        <Run Text=" | "/>
                                                                        <Run Text="{Binding Narration}" FontStyle="Italic" Foreground="Blue"/>
                                                                    </TextBlock>
                                                                </Setter.Value>
                                                            </Setter>
                                                        </DataTrigger>

                                                        <DataTrigger Binding="{Binding DataContext.SelectedTab.Type, RelativeSource={RelativeSource AncestorType={x:Type local:Ledger}}}" Value="Tenant">
                                                            <Setter Property="Content">
                                                                <Setter.Value>
                                                                    <TextBlock TextWrapping="Wrap">
                                                                        <Run Text="{Binding PlotName}"/>
                                                                        <Run Text=": "/>
                                                                        <Run Text="{Binding SpaceName}"/>
                                                                        <Run Text=" - "/>
                                                                        <Run Text="{Binding HeadName}"/>
                                                                        <Run Text=" | "/>
                                                                        <Run Text="{Binding Narration}" FontStyle="Italic" Foreground="Blue"/>
                                                                    </TextBlock>
                                                                </Setter.Value>
                                                            </Setter>
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </ContentControl.Style>
                                        </ContentControl>
                                        <local:NumReport Grid.Column="2" Text="{Binding Receivable}" />
                                        <local:NumReport Grid.Column="3" Text="{Binding Receipt}" />
                                        <local:NumReport Grid.Column="4" Text="{Binding Balance}" Margin="0 0 20 0"/>
                                        <Border Grid.Column="5" Width="{Binding Source={x:Static SystemParameters.VerticalScrollBarWidth}}">
                                            <Border.Style>
                                                <Style TargetType="Border">
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding ComputedVerticalScrollBarVisibility, ElementName=scroll}" Value="Visible">
                                                            <Setter Property="Visibility" Value="Collapsed" />
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Border.Style>
                                        </Border>
                                        <Separator Grid.Row="1" Grid.ColumnSpan="5" Background="LightBlue" Margin="0 5 0 5"/>
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>

                        <Grid Grid.Row="2">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="{Binding Source={x:Static SystemParameters.VerticalScrollBarWidth}}"/>
                            </Grid.ColumnDefinitions>

                            <Border Grid.Row="1" Grid.ColumnSpan="5" Background="AliceBlue"/>
                            <Separator Grid.Row="0" Grid.ColumnSpan="5"/>
                            <TextBlock Grid.Row="1" Text="Total" FontWeight="Bold" Margin="20 0 0 0"/>

                            <local:NumReport Grid.Row="1" Grid.Column="2" FontWeight="Bold" Text="{Binding TotalReceivable}"/>
                            <local:NumReport Grid.Row="1" Grid.Column="3" FontWeight="Bold" Text="{Binding TotalReceipt}"/>
                            <Separator Grid.Row="2" Grid.ColumnSpan="5"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Without these two lines:

<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">12</sys:Double>
<sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">12</sys:Double>

in App.xaml it works as expected! Another thing is after Adding those MergedDictionaries in App.xaml, now I've red squiggles all over my Generic.xaml.

EDIT

If I don't change those parameters in App.xaml, it looks as expected:

Answer 1

I'm not sure whether I'm right or not, one actually can't change the constant VerticalScrollBarWidth or HorizontalScrollBarHeight (in my case Width and Height are always 17) BUT at run time these key values are used by the System to render application's scrollbar according to your desired width. So to get around the best way in my opinion is to declare a constant somewhere like this:

public const double ScrollBarThickness = 12;

and instead of setting these:

<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">12</sys:Double>
<sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">12</sys:Double>

in App.xaml set those values in App.xaml.cs in this way:

protected override void OnStartup(StartupEventArgs e)
{
    base.OnStartup(e);
    Resources.Add(SystemParameters.VerticalScrollBarWidthKey, Constants.ScrollBarThickness);
    Resources.Add(SystemParameters.HorizontalScrollBarHeightKey, Constants.ScrollBarThickness);
}

and use that Constant in Binding wherever you need. In my case: I'd to redefine those two Grid.Column definitions and the dummy Border's Width in my Custom Control like this:

<ColumnDefinition Width="{Binding Source={x:Static con:Constants.ScrollBarThickness}}"/>
<Border Grid.Column="5" Width="{Binding Source={x:Static con:Constants.ScrollBarThickness}}">

I actually don't need those Merging techniques at all, it works just fine without all those! I'd love to Bind the Constant in App.xaml as well BUT I do not know how to define Style for VerticalScrollBarWidthKey or VerticalScrollBarWidthKey. What would be the Property name (???):

<Style x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">
     <Setter Property="???" Value="{Binding Source={x:Static con:Constants.ScrollBarThickness}}"/>
</Style>

if I wanted to Bind in App.xaml instead of App.xaml.cs?

Answer 2

Adding the resource to App.xaml does work.

Your way of referencing the ResourceDictionary is wrong though. You should merge it into App.xaml:

<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml"
             xmlns:sys="clr-namespace:System;assembly=System.Runtime">
    <Application.Resources>
        <ResourceDictionary>
            <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">15</sys:Double>

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/RentManager;component/Themes/Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>


    </Application.Resources>
</Application>