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

Jump to bottom

[WIP] Feature: Simplified Ribbon #707

Merged
merged 3 commits into from
Aug 29, 2021
Merged

[WIP] Feature: Simplified Ribbon #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f7ca5be
preparing to add simplified ribbon
Splitwirez Mar 3, 2019
1cb5a75
And so it begins
Splitwirez Mar 6, 2019
c2e564f
Medium icons
Splitwirez Mar 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion Fluent.Ribbon.Showcase/Fluent.Ribbon.Showcase.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
<PropertyGroup>
<RootNamespace>FluentTest</RootNamespace>
Expand All @@ -14,6 +14,9 @@
<ApplicationIcon>Icons\App.ico</ApplicationIcon>
<ApplicationManifest>app.manifest</ApplicationManifest>
</PropertyGroup>
<ItemGroup>
<None Remove="SimplifiedRibbonWindow.xaml" />
</ItemGroup>
<ItemGroup>
<None Include="app.manifest" />
</ItemGroup>
Expand All @@ -29,4 +32,9 @@
<Reference Include="System.Data" />
<Reference Include="WindowsFormsIntegration" />
</ItemGroup>
<ItemGroup>
<Compile Update="SimplifiedRibbonWindow.xaml.cs">
<SubType>Code</SubType>
</Compile>
</ItemGroup>
</Project>
53 changes: 53 additions & 0 deletions Fluent.Ribbon.Showcase/SimplifiedRibbonWindow.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<fluent:RibbonWindow x:Class="FluentTest.SimplifiedRibbonWindow"
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:fluent="urn:fluent-ribbon"
xmlns:converters="clr-namespace:FluentTest.Converters"
mc:Ignorable="d"
Title="SimplifiedRibbonWindow"
Height="600"
Width="800"
TitleForeground="Black"
TitleBackground="Transparent">
<Grid>
<fluent:Ribbon IsSimplified="True">
<fluent:Ribbon.Menu>
<fluent:Backstage />
</fluent:Ribbon.Menu>

<fluent:RibbonTabItem Header="First">
<fluent:RibbonGroupBox>
<fluent:Button Header="First Button">
<fluent:Button.MediumIcon>
<Rectangle Width="24" Height="24" Fill="Red"/>
</fluent:Button.MediumIcon>
</fluent:Button>
<fluent:Button Header="Second Button">
<fluent:Button.MediumIcon>
<Rectangle Width="24" Height="24" Fill="Green"/>
</fluent:Button.MediumIcon>
</fluent:Button>
</fluent:RibbonGroupBox>
<fluent:RibbonGroupBox>
<fluent:Button Header="Third Button">
<fluent:Button.MediumIcon>
<Rectangle Width="24" Height="24" Fill="Blue"/>
</fluent:Button.MediumIcon>
</fluent:Button>
<fluent:Button Header="Fourth Button">
<fluent:Button.MediumIcon>
<Rectangle Width="24" Height="24" Fill="Yellow"/>
</fluent:Button.MediumIcon>
</fluent:Button>
</fluent:RibbonGroupBox>
</fluent:RibbonTabItem>
<fluent:RibbonTabItem Header="Second">
<fluent:RibbonGroupBox>
<fluent:Button/>
</fluent:RibbonGroupBox>
</fluent:RibbonTabItem>
</fluent:Ribbon>
</Grid>
</fluent:RibbonWindow>
10 changes: 10 additions & 0 deletions Fluent.Ribbon.Showcase/SimplifiedRibbonWindow.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
namespace FluentTest
{
public partial class SimplifiedRibbonWindow
{
public SimplifiedRibbonWindow()
{
this.InitializeComponent();
}
}
}
3 changes: 3 additions & 0 deletions Fluent.Ribbon.Showcase/TestContent.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3255,6 +3255,9 @@ Pellentesque nec dolor sed lacus tristique rutrum sed vitae urna. Sed eu pharetr
<Fluent:Button x:Name="OpenRibbonWindowWithBackgroundImage"
Size="Middle"
Click="OpenRibbonWindowWithBackgroundImage_OnClick">Open Ribbon-Window (with background image)</Fluent:Button>
<Fluent:Button x:Name="OpenSimplifiedRibbonWindow"
Size="Middle"
Click="OpenSimplifiedRibbonWindow_OnClick">Open Simplified Ribbon-Window</Fluent:Button>
</WrapPanel>
</GroupBox>
<GroupBox Header="Issue repros">
Expand Down
5 changes: 5 additions & 0 deletions Fluent.Ribbon.Showcase/TestContent.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,6 +505,11 @@ private async void HandleShowMetroMessage(object sender, RoutedEventArgs e)

await metroWindow.ShowMessageAsync("Test", "Message");
}

private void OpenSimplifiedRibbonWindow_OnClick(object sender, RoutedEventArgs e)
{
new SimplifiedRibbonWindow().Show();
}
}

public class TestRoutedCommand
Expand Down
15 changes: 15 additions & 0 deletions Fluent.Ribbon/Controls/Button.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,21 @@ public object LargeIcon
/// </summary>
public static readonly DependencyProperty LargeIconProperty = DependencyProperty.Register(nameof(LargeIcon), typeof(object), typeof(Button), new PropertyMetadata());

/// <summary>
/// a
/// </summary>
public object MediumIcon
{
get { return this.GetValue(MediumIconProperty); }
set { this.SetValue(MediumIconProperty, value); }
}

/// <summary>
/// Using a DependencyProperty as the backing store for SmallIcon.
/// This enables animation, styling, binding, etc...
/// </summary>
public static readonly DependencyProperty MediumIconProperty = DependencyProperty.Register(nameof(MediumIcon), typeof(object), typeof(Button), new PropertyMetadata());

#endregion

#region IsDefinitive
Expand Down
14 changes: 14 additions & 0 deletions Fluent.Ribbon/Controls/Ribbon.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -612,6 +612,20 @@ public RibbonTabControl TabControl

#endregion

/// <summary>
/// Gets or sets whether or not the ribbon is in Simplified mode
/// </summary>
public bool IsSimplified
{
get { return (bool)this.GetValue(IsSimplifiedProperty); }
set { this.SetValue(IsSimplifiedProperty, value); }
}

/// <summary>
/// <see cref="DependencyProperty"/> for <see cref="IsSimplified"/>.
/// </summary>
public static readonly DependencyProperty IsSimplifiedProperty = DependencyProperty.Register(nameof(IsSimplified), typeof(bool), typeof(Ribbon), new PropertyMetadata(BooleanBoxes.FalseBox));

/// <summary>
/// Gets or sets selected tab item
/// </summary>
Expand Down
80 changes: 80 additions & 0 deletions Fluent.Ribbon/Themes/Controls/Button.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,79 @@
</ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="SimplifiedRibbonButtonControlTemplate"
TargetType="{x:Type Fluent:Button}">
<Border x:Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Height="Auto">
<StackPanel x:Name="stackPanel"
Height="Auto"
Margin="1 0"
Orientation="Horizontal">
<ContentPresenter x:Name="iconImage"
HorizontalAlignment="Center"
Height="24"
VerticalAlignment="Center"
Content="{converters:ObjectToImageConverter {Binding MediumIcon, RelativeSource={RelativeSource TemplatedParent}}, '16,16', {Binding RelativeSource={RelativeSource TemplatedParent}}}"
Width="24"
Margin="0"
SnapsToDevicePixels="True" />
<Fluent:TwoLineLabel x:Name="controlLabel"
Text="{TemplateBinding Header}"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="7 0"
HasTwoLines="False"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed"
Value="True">
<Setter Property="BorderBrush"
TargetName="border"
Value="{DynamicResource Fluent.Ribbon.Brushes.Button.Pressed.BorderBrush}" />
<Setter Property="Background"
TargetName="border"
Value="{DynamicResource Fluent.Ribbon.Brushes.Button.Pressed.Background}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Opacity"
TargetName="iconImage"
Value="0.5" />
<Setter Property="Opacity"
TargetName="controlLabel"
Value="0.5" />
<Setter Property="Effect"
TargetName="iconImage">
<Setter.Value>
<Fluent:GrayscaleEffect />
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True" />
<Condition Property="IsPressed"
Value="False" />
<Condition Property="IsEnabled"
Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="border"
Value="{DynamicResource Fluent.Ribbon.Brushes.Button.MouseOver.Background}" />
<Setter Property="BorderBrush"
TargetName="border"
Value="{DynamicResource Fluent.Ribbon.Brushes.Button.MouseOver.BorderBrush}" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="RibbonButtonStyle"
TargetType="{x:Type Fluent:Button}">
<Setter Property="Template"
Expand Down Expand Up @@ -244,6 +317,13 @@
<Setter Property="HorizontalAlignment"
Value="Left" />
</Trigger>
<DataTrigger Binding="{Binding IsSimplified, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Fluent:Ribbon}}, FallbackValue=False}"
Value="True">
<Setter Property="Template"
Value="{DynamicResource SimplifiedRibbonButtonControlTemplate}"/>
<Setter Property="Height"
Value="28"/>
</DataTrigger>
</Style.Triggers>
</Style>

Expand Down
3 changes: 3 additions & 0 deletions Fluent.Ribbon/Themes/Controls/Ribbon.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,9 @@
TargetName="quickAccessToolBarHolder"
Value="Collapsed" />
</Trigger>
<Trigger Property="IsSimplified" Value="True">
<Setter TargetName="PART_RibbonTabControl" Property="ContentHeight" Value="42"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Expand Down
27 changes: 24 additions & 3 deletions Fluent.Ribbon/Themes/Controls/RibbonGroupBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Separator">
<Border Width="1"
Height="55"
<Border x:Name="SeparatorBorder"
Width="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="2,5,2,10"
Background="{TemplateBinding Background}" />
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsSimplified, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Fluent:Ribbon}}, FallbackValue=False}" Value="False">
<Setter TargetName="SeparatorBorder" Property="Height" Value="55"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Expand Down Expand Up @@ -264,6 +269,14 @@
Height="Auto"
IsItemsHost="True"
Margin="4,0,4,0" />
<StackPanel x:Name="SimplifiedUpPanel"
Visibility="Collapsed"
Orientation="Horizontal"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="4,0,4,0" />

<Grid x:Name="PART_DownGrid"
MaxWidth="{Binding ActualWidth, ElementName=PART_ParentPanel}"
Expand Down Expand Up @@ -315,7 +328,8 @@
Visibility="Collapsed"
Grid.RowSpan="2">

<ContentControl Content="{TemplateBinding Header}"
<ContentControl x:Name="HeaderContentControl"
Content="{TemplateBinding Header}"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
Expand Down Expand Up @@ -377,6 +391,13 @@
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsSimplified, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Fluent:Ribbon}}, FallbackValue=False}" Value="True">
<Setter TargetName="PART_UpPanel" Property="IsItemsHost" Value="False"/>
<Setter TargetName="PART_UpPanel" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="SimplifiedUpPanel" Property="IsItemsHost" Value="True"/>
<Setter TargetName="SimplifiedUpPanel" Property="Visibility" Value="Visible"/>
<Setter TargetName="PART_DownGrid" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
<Trigger Property="State"
Value="Collapsed">
<Setter Property="Visibility"
Expand Down