Skip to content

Commit

Permalink
Update Styling to include a Bezel Button
Browse files Browse the repository at this point in the history
  • Loading branch information
ChrisPulman committed Nov 7, 2024
1 parent 88c4e1d commit 1753c01
Show file tree
Hide file tree
Showing 29 changed files with 2,580 additions and 55 deletions.
2 changes: 1 addition & 1 deletion Version.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"$schema": "https://raw.githubusercontent.com/dotnet/Nerdbank.GitVersioning/master/src/NerdBank.GitVersioning/version.schema.json",
"version": "2.1.2",
"version": "2.1.3",
"publicReleaseRefSpec": [
"^refs/heads/master$",
"^refs/heads/main$"
Expand Down
1 change: 1 addition & 0 deletions src/CrissCross.WPF.UI.Test/CrissCross.WPF.UI.Test.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@

<ItemGroup>
<ProjectReference Include="..\CrissCross.WPF.UI\CrissCross.WPF.UI.csproj" />
<PackageReference Include="ReactiveMarbles.ObservableEvents.SourceGenerator" Version="1.3.1" PrivateAssets="all" />
</ItemGroup>

</Project>
42 changes: 41 additions & 1 deletion src/CrissCross.WPF.UI.Test/Views/Pages/DashboardPage.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,46 @@
<ui:TreeViewItem Header="World2" />
</ui:TreeViewItem>
</ui:TreeView>

<ui:GelButton
Grid.Row="3"
Grid.Column="2"
Width="200"
Height="100"
Margin="0,60,0,0"
VerticalAlignment="Top"
BorderThickness="5"
Content="Gel Button"
FontSize="24" />
<ui:BezelButton
Grid.Row="3"
Grid.Column="3"
Grid.ColumnSpan="2"
Width="200"
Height="100"
Margin="0,60,0,0"
VerticalAlignment="Top"
BorderThickness="5"
Content="Button"
FontSize="24" />
<ui:BezelToggleButton
Grid.Row="3"
Grid.Column="3"
Grid.ColumnSpan="2"
Width="200"
Height="100"
Margin="0,180,0,0"
VerticalAlignment="Top"
BorderThickness="5"
Content="Toggle Button"
FontSize="24" />
<ui:BezelRepeatButton
Grid.Row="3"
Grid.Column="3"
Grid.ColumnSpan="2"
Width="200"
Height="100"
Margin="0,240,0,0"
Content="Repeat Button"
FontSize="24" />
</ui:Grid>
</ui:Page>
7 changes: 7 additions & 0 deletions src/CrissCross.WPF.UI.Test/Views/Pages/SettingsPage.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,12 @@
FontWeight="Medium"
Text="About CrissCross.WPF.UI" />
<ui:TextBlock Margin="0,12,0,0" Text="{Binding ViewModel.AppVersion, Mode=OneWay}" />
<ui:NumericPushButton
Width="100"
Height="100"
Margin="0,12,0,0"
DecimalPlaces="2"
Maximum="10000"
Minimum="0" />
</ui:StackPanel>
</ui:Page>
120 changes: 120 additions & 0 deletions src/CrissCross.WPF.UI/Controls/Button/BezelButton.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:CrissCross.WPF.UI.Controls">
<Style TargetType="{x:Type controls:BezelButton}">
<Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
<Setter Property="Padding" Value="{StaticResource ButtonPadding}" />
<Setter Property="FocusBrush" Value="{DynamicResource SystemAccentColorPrimaryBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="BorderThickness" Value="5" />
<Setter Property="MinorBorderThickness1" Value="5,5,5,5" />
<Setter Property="CornerRadius1" Value="20" />
<Setter Property="CornerRadius2" Value="20" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="PressedBrush">
<Setter.Value>
<RadialGradientBrush Opacity="1">
<GradientStop Offset="0.0605063069886678" Color="Transparent" />
<GradientStop Offset="0.978151309464853" Color="{DynamicResource ControlFillColorDefault}" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush Opacity="1" StartPoint="0,0.260106210035765" EndPoint="0.0679527473718436,1">
<GradientStop Offset="0.004" Color="Gainsboro" />
<GradientStop Offset="1" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="MinorBorderBrush1">
<Setter.Value>
<LinearGradientBrush Opacity="1" EndPoint="0.376828871789314,1">
<GradientStop Offset="0.004" Color="Black" />
<GradientStop Offset="0.991260523785941" Color="LightGray" />
</LinearGradientBrush>
</Setter.Value>
</Setter>

<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:BezelButton}">

<Grid
x:Name="PART_MainGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">

<controls:RaisedBorder
x:Name="PART_AICSBorder"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius1="{TemplateBinding CornerRadius1}"
CornerRadius2="{TemplateBinding CornerRadius2}"
GlareBrush="{TemplateBinding GlareBrush}"
GlareOpacityMask="{TemplateBinding GlareOpacityMask}"
MinorBorderBrush1="{TemplateBinding MinorBorderBrush1}"
MinorBorderThickness1="{TemplateBinding MinorBorderThickness1}">

<Grid
Name="PART_DepressGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">

<Border
x:Name="PART_On"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding PressedBrush}"
CornerRadius="{TemplateBinding CornerRadius2}"
Opacity="0.5"
Visibility="Hidden" />

<ContentPresenter
x:Name="Content"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentPresenter.Content="{TemplateBinding ContentControl.Content}">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="TextAlignment" Value="Center" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
</controls:RaisedBorder>

<Border
x:Name="PART_UserHintBorder"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="{TemplateBinding FocusBrush}"
BorderThickness="{TemplateBinding FocusBorderThickness}"
CornerRadius="{TemplateBinding CornerRadius1}" />
</Grid>

<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="PART_On" Property="Visibility" Value="Visible" />
<Setter TargetName="PART_MainGrid" Property="Margin" Value="2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
107 changes: 107 additions & 0 deletions src/CrissCross.WPF.UI/Controls/Button/BezelRepeatButton.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:CrissCross.WPF.UI.Controls">
<Style TargetType="{x:Type controls:BezelRepeatButton}">
<Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
<Setter Property="FocusBrush" Value="{DynamicResource SystemAccentColorPrimaryBrush}" />

<Setter Property="BorderThickness" Value="5" />
<Setter Property="FocusBorderThickness" Value="2,2,2,2" />
<Setter Property="MinorBorderThickness1" Value="5,5,5,5" />
<Setter Property="CornerRadius1" Value="20" />
<Setter Property="CornerRadius2" Value="20" />
<Setter Property="Padding" Value="1,1,1,1" />
<Setter Property="PressedBrush">
<Setter.Value>
<RadialGradientBrush Opacity="1">
<GradientStop Offset="0.0605063069886678" Color="Transparent" />
<GradientStop Offset="0.978151309464853" Color="Black" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush Opacity="1" StartPoint="0,0.260106210035765" EndPoint="0.0679527473718436,1">
<GradientStop Offset="0.004" Color="Gainsboro" />
<GradientStop Offset="1" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="MinorBorderBrush1">
<Setter.Value>
<LinearGradientBrush Opacity="1" EndPoint="0.376828871789314,1">
<GradientStop Offset="0.004" Color="Black" />
<GradientStop Offset="0.991260523785941" Color="LightGray" />
</LinearGradientBrush>
</Setter.Value>
</Setter>

<Setter Property="Control.Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type controls:BezelRepeatButton}">

<Grid
x:Name="PART_MainGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">

<controls:RaisedBorder
x:Name="PART_AICSBorder"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius1="{TemplateBinding CornerRadius1}"
CornerRadius2="{TemplateBinding CornerRadius2}"
GlareBrush="{TemplateBinding GlareBrush}"
GlareOpacityMask="{TemplateBinding GlareOpacityMask}"
MinorBorderBrush1="{TemplateBinding MinorBorderBrush1}"
MinorBorderThickness1="{TemplateBinding MinorBorderThickness1}">

<Grid
Name="PART_DepressGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">

<Border
x:Name="PART_On"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding PressedBrush}"
CornerRadius="{TemplateBinding CornerRadius2}"
Opacity="0.5"
Visibility="Hidden" />

<ContentPresenter
x:Name="Content"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentPresenter.Content="{TemplateBinding ContentControl.Content}" />
</Grid>
</controls:RaisedBorder>

<Border
x:Name="PART_UserHintBorder"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="{TemplateBinding FocusBrush}"
BorderThickness="{TemplateBinding FocusBorderThickness}"
CornerRadius="{TemplateBinding CornerRadius1}" />
</Grid>

<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="PART_On" Property="Visibility" Value="Visible" />
<Setter TargetName="PART_MainGrid" Property="Margin" Value="2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Loading

0 comments on commit 1753c01

Please sign in to comment.