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
?
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
.
If I don't change those parameters in App.xaml, it looks as expected:
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>
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
?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.