Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding styles for GridSplitter in fluent #3

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+234 −0
Open

Adding styles for GridSplitter in fluent #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Dark.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,6 +475,13 @@
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource AcrylicBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SurfaceStrokeColorFlyout}" />

<!-- GridSplitter -->
<SolidColorBrush x:Key="GridsplitterBackground" Color="{StaticResource ControlAltFillColorTransparent}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource ControlAltFillColorTertiary}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPressed" Color="{StaticResource ControlAltFillColorQuarternary}" />
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource ControlAltFillColorDisabled}" />
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource ControlStrongFillColorDefault}" />

<!-- HyperlinkButton -->
<SolidColorBrush x:Key="HyperlinkButtonBackground" Color="{StaticResource SubtleFillColorTransparent}" />
<SolidColorBrush x:Key="HyperlinkButtonBackgroundPointerOver" Color="{StaticResource SubtleFillColorSecondary}" />
Expand Down
7 changes: 7 additions & 0 deletions src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/HC.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,13 @@
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SystemColorWindowTextColor}" />

<!-- GridSplitter -->
<SolidColorBrush x:Key="GridsplitterBackground" Color="Transparent" />
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource SystemColorHighlightTextColor}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPressed" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource SystemColorButtonTextColor}" />

<!-- HyperlinkButton -->
<SolidColorBrush x:Key="HyperlinkButtonBackground" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkButtonBackgroundPointerOver" Color="{StaticResource SystemColorWindowColor}" />
Expand Down
7 changes: 7 additions & 0 deletions src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Resources/Theme/Light.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,6 +472,13 @@
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource AcrylicBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SurfaceStrokeColorFlyout}" />

<!-- GridSplitter -->
<SolidColorBrush x:Key="GridsplitterBackground" Color="{StaticResource ControlAltFillColorTransparent}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource ControlAltFillColorTertiary}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPressed" Color="{StaticResource ControlAltFillColorQuarternary}" />
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource ControlAltFillColorDisabled}" />
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource ControlStrongFillColorDefault}" />

<!-- HyperlinkButton -->
<SolidColorBrush x:Key="HyperlinkButtonBackground" Color="{StaticResource SubtleFillColorTransparent}" />
<SolidColorBrush x:Key="HyperlinkButtonBackgroundPointerOver" Color="{StaticResource SubtleFillColorSecondary}" />
Expand Down
69 changes: 69 additions & 0 deletions src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Styles/GridSplitter.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!--
This Source Code Form is subject to the terms of the MIT License.
If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
Copyright (C) Leszek Pomianowski and WPF UI Contributors.
All Rights Reserved.

Based on Microsoft XAML for Win UI
Copyright (c) Microsoft Corporation. All Rights Reserved.
-->

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=System.Runtime">

<system:Double x:Key="GridsplitterThumbHeight">24</system:Double>
<system:Double x:Key="GridsplitterThumbWidth">4</system:Double>
<system:Double x:Key="GridsplitterThumbRadius">2</system:Double>
<Thickness x:Key="GridsplitterPadding">4</Thickness>

<Style x:Key="DefaultGridSplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="IsTabStop" Value="True" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="8" />
<Setter Property="MinWidth" Value="8" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think three should we have GridSplitterMinWidth and GridSplitterMinHeight resources for MinWidth and MinHeight properties ?

<Setter Property="Padding" Value="{StaticResource GridsplitterPadding}" />
<Setter Property="Foreground" Value="{DynamicResource GridsplitterForeground}" />
<Setter Property="Background" Value="{DynamicResource GridsplitterBackground}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Border x:Name="RootGrid"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Rectangle x:Name="PART_Thumb"
Width="{StaticResource GridsplitterThumbWidth}"
Height="{StaticResource GridsplitterThumbHeight}"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. PART_Thumb Width and Height should have DynamicResource reference

Margin="{TemplateBinding Padding}"
Fill="{TemplateBinding Foreground}"
RadiusX="{StaticResource GridsplitterThumbRadius}"
RadiusY="{StaticResource GridsplitterThumbRadius}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundPointerOver}" />
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundPressed}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundDisabled}" />
<Setter TargetName="PART_Thumb" Property="Opacity" Value="0.45"/>
</Trigger>
<Trigger Property="ResizeDirection" Value="Rows">
<Setter TargetName="PART_Thumb" Property="Width" Value="{DynamicResource GridsplitterThumbHeight}"/>
<Setter TargetName="PART_Thumb" Property="Height" Value="{DynamicResource GridsplitterThumbWidth}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style BasedOn="{StaticResource DefaultGridSplitterStyle}" TargetType="{x:Type GridSplitter}" />
</ResourceDictionary>
48 changes: 48 additions & 0 deletions src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Dark.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,6 +469,12 @@
<!-- Flyout -->
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource AcrylicBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SurfaceStrokeColorFlyout}" />
<!-- GridSplitter -->
<SolidColorBrush x:Key="GridsplitterBackground" Color="{StaticResource ControlAltFillColorTransparent}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource ControlAltFillColorTertiary}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPressed" Color="{StaticResource ControlAltFillColorQuarternary}" />
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource ControlAltFillColorDisabled}" />
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource ControlStrongFillColorDefault}" />
<!-- HyperlinkButton -->
<SolidColorBrush x:Key="HyperlinkButtonBackground" Color="{StaticResource SubtleFillColorTransparent}" />
<SolidColorBrush x:Key="HyperlinkButtonBackgroundPointerOver" Color="{StaticResource SubtleFillColorSecondary}" />
Expand Down Expand Up @@ -2652,6 +2658,48 @@
<Setter Property="Focusable" Value="False" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
<system:Double x:Key="GridsplitterThumbHeight">24</system:Double>
<system:Double x:Key="GridsplitterThumbWidth">4</system:Double>
<system:Double x:Key="GridsplitterThumbRadius">2</system:Double>
<Thickness x:Key="GridsplitterPadding">4</Thickness>
<Style x:Key="DefaultGridSplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="IsTabStop" Value="True" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="8" />
<Setter Property="MinWidth" Value="8" />
<Setter Property="Padding" Value="{StaticResource GridsplitterPadding}" />
<Setter Property="Foreground" Value="{DynamicResource GridsplitterForeground}" />
<Setter Property="Background" Value="{DynamicResource GridsplitterBackground}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Border x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Rectangle x:Name="PART_Thumb" Width="{StaticResource GridsplitterThumbWidth}" Height="{StaticResource GridsplitterThumbHeight}" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" RadiusX="{StaticResource GridsplitterThumbRadius}" RadiusY="{StaticResource GridsplitterThumbRadius}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundPointerOver}" />
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundPressed}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundDisabled}" />
<Setter TargetName="PART_Thumb" Property="Opacity" Value="0.45" />
</Trigger>
<Trigger Property="ResizeDirection" Value="Rows">
<Setter TargetName="PART_Thumb" Property="Width" Value="{DynamicResource GridsplitterThumbHeight}" />
<Setter TargetName="PART_Thumb" Property="Height" Value="{DynamicResource GridsplitterThumbWidth}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource DefaultGridSplitterStyle}" TargetType="{x:Type GridSplitter}" />
<Style x:Key="{x:Type GroupItem}" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
Expand Down
48 changes: 48 additions & 0 deletions src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.HC.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,12 @@
<!-- Flyout -->
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SystemColorWindowTextColor}" />
<!-- GridSplitter -->
<SolidColorBrush x:Key="GridsplitterBackground" Color="Transparent" />
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource SystemColorHighlightTextColor}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPressed" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource SystemColorButtonTextColor}" />
<!-- HyperlinkButton -->
<SolidColorBrush x:Key="HyperlinkButtonBackground" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkButtonBackgroundPointerOver" Color="{StaticResource SystemColorWindowColor}" />
Expand Down Expand Up @@ -2633,6 +2639,48 @@
<Setter Property="Focusable" Value="False" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
<system:Double x:Key="GridsplitterThumbHeight">24</system:Double>
<system:Double x:Key="GridsplitterThumbWidth">4</system:Double>
<system:Double x:Key="GridsplitterThumbRadius">2</system:Double>
<Thickness x:Key="GridsplitterPadding">4</Thickness>
<Style x:Key="DefaultGridSplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="IsTabStop" Value="True" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="8" />
<Setter Property="MinWidth" Value="8" />
<Setter Property="Padding" Value="{StaticResource GridsplitterPadding}" />
<Setter Property="Foreground" Value="{DynamicResource GridsplitterForeground}" />
<Setter Property="Background" Value="{DynamicResource GridsplitterBackground}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Border x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Rectangle x:Name="PART_Thumb" Width="{StaticResource GridsplitterThumbWidth}" Height="{StaticResource GridsplitterThumbHeight}" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" RadiusX="{StaticResource GridsplitterThumbRadius}" RadiusY="{StaticResource GridsplitterThumbRadius}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundPointerOver}" />
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundPressed}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundDisabled}" />
<Setter TargetName="PART_Thumb" Property="Opacity" Value="0.45" />
</Trigger>
<Trigger Property="ResizeDirection" Value="Rows">
<Setter TargetName="PART_Thumb" Property="Width" Value="{DynamicResource GridsplitterThumbHeight}" />
<Setter TargetName="PART_Thumb" Property="Height" Value="{DynamicResource GridsplitterThumbWidth}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource DefaultGridSplitterStyle}" TargetType="{x:Type GridSplitter}" />
<Style x:Key="{x:Type GroupItem}" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
Expand Down
48 changes: 48 additions & 0 deletions src/Microsoft.DotNet.Wpf/src/Themes/PresentationFramework.Fluent/Themes/Fluent.Light.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -466,6 +466,12 @@
<!-- Flyout -->
<SolidColorBrush x:Key="FlyoutBackground" Color="{StaticResource AcrylicBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="FlyoutBorderBrush" Color="{StaticResource SurfaceStrokeColorFlyout}" />
<!-- GridSplitter -->
<SolidColorBrush x:Key="GridsplitterBackground" Color="{StaticResource ControlAltFillColorTransparent}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPointerOver" Color="{StaticResource ControlAltFillColorTertiary}" />
<SolidColorBrush x:Key="GridsplitterBackgroundPressed" Color="{StaticResource ControlAltFillColorQuarternary}" />
<SolidColorBrush x:Key="GridsplitterBackgroundDisabled" Color="{StaticResource ControlAltFillColorDisabled}" />
<SolidColorBrush x:Key="GridsplitterForeground" Color="{StaticResource ControlStrongFillColorDefault}" />
<!-- HyperlinkButton -->
<SolidColorBrush x:Key="HyperlinkButtonBackground" Color="{StaticResource SubtleFillColorTransparent}" />
<SolidColorBrush x:Key="HyperlinkButtonBackgroundPointerOver" Color="{StaticResource SubtleFillColorSecondary}" />
Expand Down Expand Up @@ -2649,6 +2655,48 @@
<Setter Property="Focusable" Value="False" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
<system:Double x:Key="GridsplitterThumbHeight">24</system:Double>
<system:Double x:Key="GridsplitterThumbWidth">4</system:Double>
<system:Double x:Key="GridsplitterThumbRadius">2</system:Double>
<Thickness x:Key="GridsplitterPadding">4</Thickness>
<Style x:Key="DefaultGridSplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="IsTabStop" Value="True" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="8" />
<Setter Property="MinWidth" Value="8" />
<Setter Property="Padding" Value="{StaticResource GridsplitterPadding}" />
<Setter Property="Foreground" Value="{DynamicResource GridsplitterForeground}" />
<Setter Property="Background" Value="{DynamicResource GridsplitterBackground}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Border x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Rectangle x:Name="PART_Thumb" Width="{StaticResource GridsplitterThumbWidth}" Height="{StaticResource GridsplitterThumbHeight}" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" RadiusX="{StaticResource GridsplitterThumbRadius}" RadiusY="{StaticResource GridsplitterThumbRadius}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundPointerOver}" />
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundPressed}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource GridsplitterBackgroundDisabled}" />
<Setter TargetName="PART_Thumb" Property="Opacity" Value="0.45" />
</Trigger>
<Trigger Property="ResizeDirection" Value="Rows">
<Setter TargetName="PART_Thumb" Property="Width" Value="{DynamicResource GridsplitterThumbHeight}" />
<Setter TargetName="PART_Thumb" Property="Height" Value="{DynamicResource GridsplitterThumbWidth}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource DefaultGridSplitterStyle}" TargetType="{x:Type GridSplitter}" />
<Style x:Key="{x:Type GroupItem}" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
Expand Down