mirror of
https://github.com/microsoft/PowerToys.git
synced 2026-04-07 03:36:44 +02:00
[UX] New dashboard & refactored KeyVisual (#40214)
### Updated `KeyVisual` and `Shortcut` control - Refactoring `KeyVisual` to remove redundant properties and UI elements, and using Styles for better customization. - Shortcut control now shows a "Configure shortcut" label when there's no shortcut configured. ### Other changes - Consolidated converters that were used across pages in `App.xaml.cs` with consistent naming. - Renamed templated controls (from `.cs` to `.xaml.cs`) and moving those to the `Controls` root folder vs. individual folders for a better overview. <!-- Please review the items on the PR checklist before submitting--> ## PR Checklist Closes #39520 Closes #32944 --------- Co-authored-by: Jay <65828559+Jay-o-Way@users.noreply.github.com> Co-authored-by: Jaylyn Barbee <51131738+Jaylyn-Barbee@users.noreply.github.com>
This commit is contained in:
Niels Laute
@@ -0,0 +1,70 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<UserControl
|
||||
x:Class="Microsoft.PowerToys.Settings.UI.Controls.Card"
|
||||
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:local="using:Microsoft.PowerToys.Settings.UI.Controls"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
Padding="8"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
VerticalContentAlignment="Stretch"
|
||||
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
|
||||
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="{StaticResource OverlayCornerRadius}"
|
||||
mc:Ignorable="d">
|
||||
<Grid
|
||||
VerticalAlignment="{x:Bind VerticalContentAlignment, Mode=OneWay}"
|
||||
Background="{x:Bind Background, Mode=OneWay}"
|
||||
BorderBrush="{x:Bind BorderBrush, Mode=OneWay}"
|
||||
BorderThickness="{x:Bind BorderThickness, Mode=OneWay}"
|
||||
CornerRadius="{x:Bind CornerRadius, Mode=OneWay}">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" MinHeight="44" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
<Grid x:Name="TitleGrid">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<TextBlock
|
||||
Margin="16,0,0,0"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="16"
|
||||
FontWeight="SemiBold"
|
||||
Text="{x:Bind Title, Mode=OneWay}" />
|
||||
<ContentPresenter
|
||||
Grid.Column="2"
|
||||
HorizontalAlignment="Right"
|
||||
VerticalAlignment="Center"
|
||||
Content="{x:Bind TitleContent, Mode=OneWay}" />
|
||||
</Grid>
|
||||
<Rectangle
|
||||
x:Name="Divider"
|
||||
Grid.Row="1"
|
||||
Height="1"
|
||||
HorizontalAlignment="Stretch"
|
||||
Fill="{ThemeResource DividerStrokeColorDefaultBrush}"
|
||||
Visibility="{x:Bind DividerVisibility, Mode=OneWay}" />
|
||||
|
||||
<ContentPresenter
|
||||
Grid.Row="2"
|
||||
Margin="{x:Bind Padding, Mode=OneWay}"
|
||||
HorizontalAlignment="{x:Bind HorizontalContentAlignment, Mode=OneWay}"
|
||||
VerticalAlignment="{x:Bind VerticalContentAlignment, Mode=OneWay}"
|
||||
Content="{x:Bind Content, Mode=OneWay}" />
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="TitleGridVisibilityStates">
|
||||
<VisualState x:Name="TitleGridVisible" />
|
||||
<VisualState x:Name="TitleGridCollapsed">
|
||||
<VisualState.Setters>
|
||||
<Setter Target="TitleGrid.Visibility" Value="Collapsed" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
@@ -0,0 +1,73 @@
|
||||
// Copyright (c) Microsoft Corporation
|
||||
// The Microsoft Corporation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using Microsoft.UI.Xaml;
|
||||
using Microsoft.UI.Xaml.Controls;
|
||||
|
||||
namespace Microsoft.PowerToys.Settings.UI.Controls
|
||||
{
|
||||
public sealed partial class Card : UserControl
|
||||
{
|
||||
public static readonly DependencyProperty TitleContentProperty = DependencyProperty.Register(nameof(TitleContent), typeof(object), typeof(Card), new PropertyMetadata(defaultValue: null, OnVisualPropertyChanged));
|
||||
|
||||
public object TitleContent
|
||||
{
|
||||
get => (object)GetValue(TitleContentProperty);
|
||||
set => SetValue(TitleContentProperty, value);
|
||||
}
|
||||
|
||||
public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(nameof(Title), typeof(string), typeof(Card), new PropertyMetadata(defaultValue: null, OnVisualPropertyChanged));
|
||||
|
||||
public string Title
|
||||
{
|
||||
get => (string)GetValue(TitleProperty);
|
||||
set => SetValue(TitleProperty, value);
|
||||
}
|
||||
|
||||
public static new readonly DependencyProperty ContentProperty = DependencyProperty.Register(nameof(Content), typeof(object), typeof(Card), new PropertyMetadata(defaultValue: null));
|
||||
|
||||
[System.Diagnostics.CodeAnalysis.SuppressMessage("Design", "CA1061:Do not hide base class methods", Justification = "We need to hide the base class method")]
|
||||
public new object Content
|
||||
{
|
||||
get => (object)GetValue(ContentProperty);
|
||||
set => SetValue(ContentProperty, value);
|
||||
}
|
||||
|
||||
public static readonly DependencyProperty DividerVisibilityProperty = DependencyProperty.Register(nameof(DividerVisibility), typeof(Visibility), typeof(Card), new PropertyMetadata(defaultValue: null));
|
||||
|
||||
public Visibility DividerVisibility
|
||||
{
|
||||
get => (Visibility)GetValue(DividerVisibilityProperty);
|
||||
set => SetValue(DividerVisibilityProperty, value);
|
||||
}
|
||||
|
||||
public Card()
|
||||
{
|
||||
InitializeComponent();
|
||||
SetVisualStates();
|
||||
}
|
||||
|
||||
private static void OnVisualPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
|
||||
{
|
||||
if (d is Card card)
|
||||
{
|
||||
card.SetVisualStates();
|
||||
}
|
||||
}
|
||||
|
||||
private void SetVisualStates()
|
||||
{
|
||||
if (string.IsNullOrEmpty(Title) && TitleContent == null)
|
||||
{
|
||||
VisualStateManager.GoToState(this, "TitleGridCollapsed", true);
|
||||
DividerVisibility = Visibility.Collapsed;
|
||||
}
|
||||
else
|
||||
{
|
||||
VisualStateManager.GoToState(this, "TitleGridVisible", true);
|
||||
DividerVisibility = Visibility.Visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<UserControl
|
||||
x:Class="Microsoft.PowerToys.Settings.UI.Controls.CheckUpdateControl"
|
||||
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:local="using:Microsoft.PowerToys.Settings.UI.Controls"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
mc:Ignorable="d">
|
||||
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<Button
|
||||
Click="SWVersionButtonClicked"
|
||||
Style="{StaticResource SubtleButtonStyle}"
|
||||
Visibility="{x:Bind UpdateAvailable, Mode=OneWay}">
|
||||
<Grid ColumnSpacing="16">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Width="20"
|
||||
Height="20"
|
||||
CornerRadius="10">
|
||||
<Border.Background>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1">
|
||||
<GradientStop Offset="0.0" Color="#239DE0" />
|
||||
<GradientStop Offset="1.0" Color="#037CD6" />
|
||||
</LinearGradientBrush>
|
||||
</Border.Background>
|
||||
<FontIcon
|
||||
AutomationProperties.AccessibilityView="Raw"
|
||||
FontSize="11"
|
||||
Foreground="White"
|
||||
Glyph="" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" Orientation="Vertical">
|
||||
<TextBlock x:Uid="UpdateAvailableTextBlock" FontWeight="SemiBold" />
|
||||
<TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Style="{StaticResource CaptionTextBlockStyle}">
|
||||
<Run x:Uid="GeneralVersion" />
|
||||
<Run Text="{x:Bind UpdateSettingsConfig.NewVersion, Mode=OneWay}" />
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Button>
|
||||
<Grid
|
||||
Padding="0,0,4,0"
|
||||
VerticalAlignment="Center"
|
||||
ColumnSpacing="16"
|
||||
Visibility="{x:Bind UpdateAvailable, Converter={StaticResource ReverseBoolToVisibilityConverter}, Mode=OneWay}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Width="20"
|
||||
Height="20"
|
||||
CornerRadius="10">
|
||||
<Border.Background>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1">
|
||||
<GradientStop Offset="0.0" Color="#6FB538" />
|
||||
<GradientStop Offset="1.0" Color="#397A24" />
|
||||
</LinearGradientBrush>
|
||||
</Border.Background>
|
||||
<FontIcon
|
||||
AutomationProperties.AccessibilityView="Raw"
|
||||
FontSize="11"
|
||||
Foreground="White"
|
||||
Glyph="" />
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" Orientation="Vertical">
|
||||
<TextBlock x:Uid="YoureUpToDate" FontWeight="SemiBold" />
|
||||
<TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Style="{StaticResource CaptionTextBlockStyle}">
|
||||
<Run x:Uid="General_VersionLastChecked" />
|
||||
<Run Text="{x:Bind UpdateSettingsConfig.LastCheckedDateLocalized, Mode=OneWay}" />
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
@@ -0,0 +1,30 @@
|
||||
// Copyright (c) Microsoft Corporation
|
||||
// The Microsoft Corporation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using Microsoft.PowerToys.Settings.UI.Library;
|
||||
using Microsoft.PowerToys.Settings.UI.Services;
|
||||
using Microsoft.PowerToys.Settings.UI.Views;
|
||||
using Microsoft.UI.Xaml.Controls;
|
||||
|
||||
namespace Microsoft.PowerToys.Settings.UI.Controls
|
||||
{
|
||||
public sealed partial class CheckUpdateControl : UserControl
|
||||
{
|
||||
public bool UpdateAvailable { get; set; }
|
||||
|
||||
public UpdatingSettings UpdateSettingsConfig { get; set; }
|
||||
|
||||
public CheckUpdateControl()
|
||||
{
|
||||
InitializeComponent();
|
||||
UpdateSettingsConfig = UpdatingSettings.LoadSettings();
|
||||
UpdateAvailable = UpdateSettingsConfig != null && (UpdateSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToInstall || UpdateSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToDownload);
|
||||
}
|
||||
|
||||
private void SWVersionButtonClicked(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
|
||||
{
|
||||
NavigationService.Navigate(typeof(GeneralPage));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<UserControl
|
||||
x:Class="Microsoft.PowerToys.Settings.UI.Controls.ShortcutConflictControl"
|
||||
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:local="using:Microsoft.PowerToys.Settings.UI.Controls"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
mc:Ignorable="d">
|
||||
|
||||
<Grid>
|
||||
<Button Click="ShortcutConflictBtn_Click" Style="{StaticResource SubtleButtonStyle}">
|
||||
<Grid ColumnSpacing="16">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<FontIcon
|
||||
AutomationProperties.AccessibilityView="Raw"
|
||||
FontSize="20"
|
||||
Foreground="{ThemeResource SystemFillColorCriticalBrush}"
|
||||
Glyph="" />
|
||||
<StackPanel Grid.Column="1" Orientation="Vertical">
|
||||
<TextBlock FontWeight="SemiBold" Text="Shortcut conflicts" />
|
||||
<TextBlock
|
||||
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
|
||||
Style="{StaticResource CaptionTextBlockStyle}"
|
||||
Text="2 conflicts found" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Button>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
@@ -0,0 +1,40 @@
|
||||
// Copyright (c) Microsoft Corporation
|
||||
// The Microsoft Corporation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.IO;
|
||||
using System.Linq;
|
||||
using System.Runtime.InteropServices.WindowsRuntime;
|
||||
using Microsoft.UI.Xaml;
|
||||
using Microsoft.UI.Xaml.Controls;
|
||||
using Microsoft.UI.Xaml.Controls.Primitives;
|
||||
using Microsoft.UI.Xaml.Data;
|
||||
using Microsoft.UI.Xaml.Input;
|
||||
using Microsoft.UI.Xaml.Media;
|
||||
using Microsoft.UI.Xaml.Navigation;
|
||||
using Windows.Foundation;
|
||||
using Windows.Foundation.Collections;
|
||||
|
||||
namespace Microsoft.PowerToys.Settings.UI.Controls
|
||||
{
|
||||
public sealed partial class ShortcutConflictControl : UserControl
|
||||
{
|
||||
public ShortcutConflictControl()
|
||||
{
|
||||
InitializeComponent();
|
||||
GetShortcutConflicts();
|
||||
}
|
||||
|
||||
private void GetShortcutConflicts()
|
||||
{
|
||||
// TO DO: Implement the logic to retrieve and display shortcut conflicts. Make sure to Collapse this control if not conflicts are found.
|
||||
}
|
||||
|
||||
private void ShortcutConflictBtn_Click(object sender, RoutedEventArgs e)
|
||||
{
|
||||
// TO DO: Handle the button click event to show the shortcut conflicts window.
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user