mirror of
https://github.com/microsoft/PowerToys.git
synced 2026-04-07 11:46:30 +02:00
[Settings] Aligning XAML across all pages (#12212)
* Updating settings * OOBE button * Removed unused namespaces Co-authored-by: Niels Laute <niels9001@hotmail.com>
This commit is contained in:
Niels Laute
@@ -0,0 +1,117 @@
|
||||
<UserControl
|
||||
x:Class="Microsoft.PowerToys.Settings.UI.Controls.SettingsPageControl"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
|
||||
mc:Ignorable="d"
|
||||
>
|
||||
|
||||
<UserControl.Resources>
|
||||
<converters:DoubleToVisibilityConverter x:Name="doubleToVisibilityConverter" GreaterThan="0" TrueValue="Visible" FalseValue="Collapsed" />
|
||||
</UserControl.Resources>
|
||||
|
||||
<Grid RowSpacing="{StaticResource DefaultRowSpacing}">
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="LayoutVisualStates">
|
||||
<VisualState x:Name="WideLayout">
|
||||
<VisualState.StateTriggers>
|
||||
<AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
|
||||
</VisualState.StateTriggers>
|
||||
</VisualState>
|
||||
<VisualState x:Name="SmallLayout">
|
||||
<VisualState.StateTriggers>
|
||||
<AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
|
||||
<AdaptiveTrigger MinWindowWidth="0" />
|
||||
</VisualState.StateTriggers>
|
||||
<VisualState.Setters>
|
||||
<Setter Target="SidePanel.(Grid.Column)" Value="0"/>
|
||||
<Setter Target="SidePanel.Width" Value="Auto"/>
|
||||
<Setter Target="ModuleContentPresenter.(Grid.Row)" Value="1" />
|
||||
<Setter Target="ModuleContentPresenter.Margin" Value="0" />
|
||||
<Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
|
||||
<Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
|
||||
<Setter Target="LinksPanel.Margin" Value="0,12,0,0" />
|
||||
<Setter Target="AboutImage.Margin" Value="0,12,12,0" />
|
||||
<Setter Target="AboutTitle.Visibility" Value="Collapsed" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*"/>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<ContentPresenter x:Name="ModuleContentPresenter"
|
||||
Content="{x:Bind ModuleContent}"
|
||||
Margin="0,0,48,0"
|
||||
HorizontalAlignment="Left"
|
||||
MaxWidth="{StaticResource MaxContentWidth}"/>
|
||||
|
||||
<RelativePanel Grid.Column="1" x:Name="SidePanel" Width="{StaticResource SidePanelWidth}">
|
||||
<StackPanel x:Name="DescriptionPanel">
|
||||
<TextBlock x:Name="AboutTitle"
|
||||
Text="{x:Bind ModuleTitle}"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Margin="{StaticResource XSmallBottomMargin}"/>
|
||||
<TextBlock Text="{x:Bind ModuleDescription}"
|
||||
TextWrapping="Wrap">
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
|
||||
<HyperlinkButton x:Name="AboutImage"
|
||||
RelativePanel.Below="DescriptionPanel"
|
||||
MaxWidth="240"
|
||||
CornerRadius="4"
|
||||
NavigateUri="{x:Bind ModuleImageLink}"
|
||||
Margin="{StaticResource SmallTopBottomMargin}">
|
||||
<Image>
|
||||
<Image.Source>
|
||||
<BitmapImage UriSource="{x:Bind ModuleImageSource}" />
|
||||
</Image.Source>
|
||||
</Image>
|
||||
</HyperlinkButton>
|
||||
|
||||
<StackPanel x:Name="LinksPanel"
|
||||
Margin="0,1,0,0"
|
||||
RelativePanel.Below="AboutImage"
|
||||
Orientation="Vertical">
|
||||
|
||||
<StackPanel x:Name="ModuleLinksPanel" Orientation="Vertical">
|
||||
<ItemsControl ItemsSource="{x:Bind ModuleLinks}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="local:SidePanelLink">
|
||||
<HyperlinkButton NavigateUri="{x:Bind Link}" Margin="0,-3,0,0">
|
||||
<TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
|
||||
</HyperlinkButton>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel x:Name="AttributionPanel"
|
||||
Visibility="{x:Bind AttributionLinks.Count, Converter={StaticResource doubleToVisibilityConverter}}"
|
||||
Orientation="Vertical">
|
||||
<TextBlock x:Uid="AttributionTitle" Style="{StaticResource SettingsGroupTitleStyle}" />
|
||||
|
||||
<ItemsControl x:Name="AttributionLinksItemControl" ItemsSource="{x:Bind AttributionLinks}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate x:DataType="local:SidePanelLink">
|
||||
<HyperlinkButton NavigateUri="{x:Bind Link}" Margin="0,-3,0,0">
|
||||
<TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
|
||||
</HyperlinkButton>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</RelativePanel>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
@@ -0,0 +1,88 @@
|
||||
// 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.Collections.ObjectModel;
|
||||
using System.IO;
|
||||
using System.Linq;
|
||||
using System.Runtime.InteropServices.WindowsRuntime;
|
||||
using Windows.Foundation;
|
||||
using Windows.Foundation.Collections;
|
||||
using Windows.UI.Xaml;
|
||||
using Windows.UI.Xaml.Controls;
|
||||
using Windows.UI.Xaml.Controls.Primitives;
|
||||
using Windows.UI.Xaml.Data;
|
||||
using Windows.UI.Xaml.Documents;
|
||||
using Windows.UI.Xaml.Input;
|
||||
using Windows.UI.Xaml.Media;
|
||||
using Windows.UI.Xaml.Navigation;
|
||||
|
||||
namespace Microsoft.PowerToys.Settings.UI.Controls
|
||||
{
|
||||
public sealed partial class SettingsPageControl : UserControl
|
||||
{
|
||||
public SettingsPageControl()
|
||||
{
|
||||
this.InitializeComponent();
|
||||
ModuleLinks = new ObservableCollection<SidePanelLink>();
|
||||
AttributionLinks = new ObservableCollection<SidePanelLink>();
|
||||
}
|
||||
|
||||
public object ModuleContent
|
||||
{
|
||||
get { return (object)GetValue(ModuleContentProperty); }
|
||||
set { SetValue(ModuleContentProperty, value); }
|
||||
}
|
||||
|
||||
public static readonly DependencyProperty ModuleContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(SettingsPageControl), new PropertyMetadata(new Grid()));
|
||||
|
||||
public string ModuleTitle
|
||||
{
|
||||
get => (string)GetValue(ModuleTitleProperty);
|
||||
set => SetValue(ModuleTitleProperty, value);
|
||||
}
|
||||
|
||||
public string ModuleDescription
|
||||
{
|
||||
get => (string)GetValue(ModuleDescriptionProperty);
|
||||
set => SetValue(ModuleDescriptionProperty, value);
|
||||
}
|
||||
|
||||
public string ModuleImageSource
|
||||
{
|
||||
get => (string)GetValue(ModuleImageSourceProperty);
|
||||
set => SetValue(ModuleImageSourceProperty, value);
|
||||
}
|
||||
|
||||
public Uri ModuleImageLink
|
||||
{
|
||||
get => (Uri)GetValue(ModuleImageLinkProperty);
|
||||
set => SetValue(ModuleImageLinkProperty, value);
|
||||
}
|
||||
|
||||
#pragma warning disable CA2227 // Collection properties should be read only
|
||||
public ObservableCollection<SidePanelLink> ModuleLinks
|
||||
#pragma warning restore CA2227 // Collection properties should be read only
|
||||
{
|
||||
get => (ObservableCollection<SidePanelLink>)GetValue(ModuleLinksProperty);
|
||||
set => SetValue(ModuleLinksProperty, value);
|
||||
}
|
||||
|
||||
#pragma warning disable CA2227 // Collection properties should be read only
|
||||
public ObservableCollection<SidePanelLink> AttributionLinks
|
||||
#pragma warning restore CA2227 // Collection properties should be read only
|
||||
{
|
||||
get => (ObservableCollection<SidePanelLink>)GetValue(AttributionLinksProperty);
|
||||
set => SetValue(AttributionLinksProperty, value);
|
||||
}
|
||||
|
||||
public static readonly DependencyProperty ModuleTitleProperty = DependencyProperty.Register("ModuleTitle", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
|
||||
public static readonly DependencyProperty ModuleDescriptionProperty = DependencyProperty.Register("ModuleDescription", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
|
||||
public static readonly DependencyProperty ModuleImageSourceProperty = DependencyProperty.Register("ModuleImageSource", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
|
||||
public static readonly DependencyProperty ModuleImageLinkProperty = DependencyProperty.Register("ModuleImageLink", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
|
||||
public static readonly DependencyProperty ModuleLinksProperty = DependencyProperty.Register("ModuleLinks", typeof(ObservableCollection<SidePanelLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<SidePanelLink>()));
|
||||
public static readonly DependencyProperty AttributionLinksProperty = DependencyProperty.Register("AttributionLinks", typeof(ObservableCollection<SidePanelLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<SidePanelLink>()));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// 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;
|
||||
|
||||
namespace Microsoft.PowerToys.Settings.UI.Controls
|
||||
{
|
||||
public class SidePanelLink
|
||||
{
|
||||
public string Label { get; set; }
|
||||
|
||||
public Uri Link { get; set; }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user