src/Files.App/Views/Settings/AppearancePage.xaml - main - githubmirror/Files

src/Files.App/Views/Settings/AppearancePage.xaml
313 строк12 KB
yair100
Feature: Replaced Settings Dialog with page (#18410)
23 апр 2026, 23:59
23 апр 2026, 23:5965e4bf8
<!--  Copyright (c) Files Community. Licensed under the MIT License.  -->
<Page
	x:Class="Files.App.Views.Settings.AppearancePage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:converters="using:Files.App.Converters"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:dataitem="using:Files.App.Data.Items"
	xmlns:helpers="using:Files.App.Helpers"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:uc="using:Files.App.UserControls"
	xmlns:wctcontrols="using:CommunityToolkit.WinUI.Controls"
	mc:Ignorable="d">

	<Page.Resources>
		<ResourceDictionary>
			<converters:StringToBrushConverter x:Key="StringToBrushConverter" />

			<DataTemplate x:Key="AppThemeResourcesItemTemplate" x:DataType="dataitem:AppThemeResourceItem">
				<Grid
					Width="120"
					AutomationProperties.Name="{x:Bind Name, Mode=OneWay}"
					BorderBrush="{ThemeResource ControlElevationBorderBrush}"
					BorderThickness="1"
					CornerRadius="6"
					ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
					<Grid.RowDefinitions>
						<RowDefinition Height="16" />
						<RowDefinition Height="50" />
						<RowDefinition Height="Auto" />
					</Grid.RowDefinitions>
					<!--  Background  -->
					<Border
						Grid.RowSpan="2"
						Height="66"
						Background="{x:Bind BackgroundColor, Converter={StaticResource StringToBrushConverter}, Mode=OneWay}"
						CornerRadius="4,4,0,0" />

					<!--  Tab Bar  -->
					<StackPanel Orientation="Horizontal">
						<Border
							Width="4"
							Height="1"
							VerticalAlignment="Bottom"
							Background="{ThemeResource ControlElevationBorderBrush}" />
						<Border
							Width="32"
							Height="12"
							VerticalAlignment="Bottom"
							Background="{ThemeResource LayerOnMicaBaseAltFillColorDefaultBrush}"
							BorderBrush="{ThemeResource ControlElevationBorderBrush}"
							BorderThickness="1,1,1,0"
							CornerRadius="4,4,0,0" />
						<Border
							Width="86"
							Height="1"
							VerticalAlignment="Bottom"
							Background="{ThemeResource ControlElevationBorderBrush}" />
					</StackPanel>

					<!--  File area  -->
					<Border
						Grid.Row="1"
						Height="50"
						VerticalAlignment="Bottom"
						Background="{ThemeResource LayerOnMicaBaseAltFillColorDefaultBrush}"
						BorderBrush="{ThemeResource ControlElevationBorderBrush}"
						BorderThickness="0,0,0,.5" />

					<TextBlock
						Grid.Row="2"
						Padding="4"
						HorizontalAlignment="Center"
						Text="{x:Bind Name, Mode=OneWay}"
						TextTrimming="CharacterEllipsis" />
				</Grid>
			</DataTemplate>
		</ResourceDictionary>
	</Page.Resources>

	<Grid>
		<StackPanel
			HorizontalAlignment="Stretch"
			VerticalAlignment="Stretch"
			Spacing="4">

			<!--  Title  -->
			<TextBlock
				Padding="0,0,0,12"
				Style="{StaticResource App.Theme.SubtitleTextBlockStyle}"
				Text="{helpers:ResourceString Name=Appearance}" />

			<!--  Theme  -->
			<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=SettingsAppearanceTheme}">
				<wctcontrols:SettingsCard.HeaderIcon>
					<FontIcon Glyph="&#xE790;" />
				</wctcontrols:SettingsCard.HeaderIcon>
				<uc:ComboBoxEx
					x:Name="ThemeChooser"
					AutomationProperties.Name="{helpers:ResourceString Name=SettingsAppearanceTheme}"
					ItemsSource="{x:Bind ViewModel.Themes, Mode=OneWay}"
					SelectedIndex="{x:Bind ViewModel.SelectedThemeIndex, Mode=TwoWay}" />
			</wctcontrols:SettingsCard>

			<!--  Backdrop Material  -->
			<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=BackdropMaterial}">
				<wctcontrols:SettingsCard.HeaderIcon>
					<FontIcon Glyph="&#xEF1F;" />
				</wctcontrols:SettingsCard.HeaderIcon>
				<uc:ComboBoxEx
					AutomationProperties.Name="{helpers:ResourceString Name=BackdropMaterial}"
					ItemsSource="{x:Bind ViewModel.BackdropMaterialTypes.Values}"
					SelectedItem="{x:Bind ViewModel.SelectedBackdropMaterial, Mode=TwoWay}" />
			</wctcontrols:SettingsCard>

			<!--  App Background  -->
			<wctcontrols:SettingsExpander
				HorizontalAlignment="Stretch"
				Header="{helpers:ResourceString Name=BackgroundColor}"
				IsExpanded="True">
				<wctcontrols:SettingsExpander.HeaderIcon>
					<FontIcon Glyph="&#xE771;" />
				</wctcontrols:SettingsExpander.HeaderIcon>
				<Button Padding="0" AutomationProperties.Name="{helpers:ResourceString Name=BackgroundColor}">
					<StackPanel Orientation="Horizontal">
						<Border
							Width="24"
							Height="24"
							Margin="4"
							Background="Gray"
							CornerRadius="4">
							<Grid>
								<PathIcon Data="M0 6 L0 0 L6 0 L6 6 L12 6 L12 0 L18 0 L18 6 L12 6 L12 12 L18 12 L18 6 L24 6 L24 12 L18 12 L18 18 L24 18 L24 24 L6 24 L6 18 L0 18 L0 12 L6 12 L6 18 L12 18 L12 24 L18 24 L18 18 L12 18 L12 12 L6 12 L6 6 Z" Foreground="LightGray" />
								<Rectangle Fill="{ThemeResource App.Theme.BackgroundBrush}" />
							</Grid>
						</Border>
						<FontIcon
							Margin="8,4,10,4"
							FontSize="12"
							Glyph="&#xE70D;" />
					</StackPanel>
					<Button.Flyout>
						<Flyout>
							<wctcontrols:ColorPicker
								IsAlphaEnabled="True"
								IsColorSpectrumVisible="False"
								Color="{x:Bind ViewModel.AppThemeBackgroundColor, Mode=TwoWay}" />
						</Flyout>
					</Button.Flyout>
				</Button>
				<wctcontrols:SettingsExpander.ItemsHeader>
					<GridView
						Padding="8"
						HorizontalAlignment="Stretch"
						Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
						ItemTemplate="{StaticResource AppThemeResourcesItemTemplate}"
						ItemsSource="{x:Bind ViewModel.AppThemeResources, Mode=OneWay}"
						SelectedItem="{x:Bind ViewModel.SelectedAppThemeResources, Mode=TwoWay}" />
				</wctcontrols:SettingsExpander.ItemsHeader>
			</wctcontrols:SettingsExpander>

			<!--  App Background Image  -->
			<wctcontrols:SettingsExpander
				HorizontalAlignment="Stretch"
				Description="{x:Bind ViewModel.AppThemeBackgroundImageSource, Mode=OneWay}"
				Header="{helpers:ResourceString Name=BackgroundImage}"
				IsExpanded="False">
				<wctcontrols:SettingsExpander.HeaderIcon>
					<FontIcon Glyph="&#xE91B;" />
				</wctcontrols:SettingsExpander.HeaderIcon>

				<!--  Browse Button  -->
				<SplitButton
					x:Name="SelectImageButton"
					Command="{x:Bind ViewModel.SelectImageCommand, Mode=OneWay}"
					Content="{helpers:ResourceString Name=Browse}">
					<SplitButton.Flyout>
						<MenuFlyout Placement="Bottom">
							<MenuFlyoutItem
								x:Name="RemoveImageMenuItem"
								Command="{x:Bind ViewModel.RemoveImageCommand, Mode=OneWay}"
								Text="{helpers:ResourceString Name=Remove}" />
						</MenuFlyout>
					</SplitButton.Flyout>
				</SplitButton>

				<wctcontrols:SettingsExpander.Items>
					<!--  Opactiy Slider  -->
					<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=Opacity}">
						<Slider
							Width="140"
							HorizontalAlignment="Right"
							AutomationProperties.Name="{helpers:ResourceString Name=Opacity}"
							IsThumbToolTipEnabled="False"
							Maximum="1"
							Minimum=".1"
							StepFrequency=".1"
							Value="{x:Bind ViewModel.AppThemeBackgroundImageOpacity, Mode=TwoWay}" />
					</wctcontrols:SettingsCard>

					<!--  Image Fit  -->
					<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=ImageFit}">
						<uc:ComboBoxEx
							MinWidth="140"
							AutomationProperties.Name="{helpers:ResourceString Name=ImageFit}"
							ItemsSource="{x:Bind ViewModel.ImageStretchTypes.Values}"
							SelectedItem="{x:Bind ViewModel.SelectedImageStretchType, Mode=TwoWay}" />
					</wctcontrols:SettingsCard>

					<!--  VerticalAlignment  -->
					<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=VerticalAlignment}">
						<uc:ComboBoxEx
							MinWidth="140"
							AutomationProperties.Name="{helpers:ResourceString Name=VerticalAlignment}"
							ItemsSource="{x:Bind ViewModel.ImageVerticalAlignmentTypes.Values}"
							SelectedItem="{x:Bind ViewModel.SelectedImageVerticalAlignmentType, Mode=TwoWay}" />
					</wctcontrols:SettingsCard>

					<!--  HorizontalAlignment  -->
					<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=HorizontalAlignment}">
						<uc:ComboBoxEx
							MinWidth="140"
							AutomationProperties.Name="{helpers:ResourceString Name=HorizontalAlignment}"
							ItemsSource="{x:Bind ViewModel.ImageHorizontalAlignmentTypes.Values}"
							SelectedItem="{x:Bind ViewModel.SelectedImageHorizontalAlignmentType, Mode=TwoWay}" />
					</wctcontrols:SettingsCard>

				</wctcontrols:SettingsExpander.Items>
			</wctcontrols:SettingsExpander>

			<!--  Font  -->
			<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=Font}">
				<wctcontrols:SettingsCard.HeaderIcon>
					<FontIcon Glyph="&#xE8D2;" />
				</wctcontrols:SettingsCard.HeaderIcon>
				<uc:ComboBoxEx
					AutomationProperties.Name="{helpers:ResourceString Name=Font}"
					ItemsSource="{x:Bind ViewModel.AppThemeFontFamilyOptions.Values, Mode=OneWay}"
					SelectedItem="{x:Bind ViewModel.SelectedAppThemeFontFamilyOption, Mode=TwoWay}" />
			</wctcontrols:SettingsCard>

			<!--  Show tab actions  -->
			<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=ShowTabActions}">
				<wctcontrols:SettingsCard.HeaderIcon>
					<PathIcon Data="{StaticResource App.Theme.PathIcon.TabActions}" />
				</wctcontrols:SettingsCard.HeaderIcon>
				<ToggleSwitch
					AutomationProperties.AutomationControlType="Custom"
					AutomationProperties.Name="{helpers:ResourceString Name=ShowTabActions}"
					IsOn="{x:Bind ViewModel.ShowTabActions, Mode=TwoWay}" />
			</wctcontrols:SettingsCard>

			<!--  Toolbar  -->
			<wctcontrols:SettingsExpander Header="{helpers:ResourceString Name=AddressBar}">
				<wctcontrols:SettingsExpander.HeaderIcon>
					<PathIcon Data="{StaticResource App.Theme.PathIcon.WebAsset}" />
				</wctcontrols:SettingsExpander.HeaderIcon>

				<wctcontrols:SettingsExpander.Items>
					<!--  Show shelf pane toggle button  -->
					<wctcontrols:SettingsCard
						x:Name="ShowShelfPaneSetting"
						Header="{helpers:ResourceString Name=ShowShelfPaneButtonInAddressBar}"
						Visibility="{x:Bind ViewModel.IsAppEnvironmentDev, Mode=OneTime}">
						<ToggleSwitch AutomationProperties.Name="{helpers:ResourceString Name=ShowShelfPaneButtonInAddressBar}" IsOn="{x:Bind ViewModel.ShowShelfPaneToggleButton, Mode=TwoWay}" />
					</wctcontrols:SettingsCard>

					<!--  Show status center  -->
					<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=ShowStatusCenterButton}">
						<uc:ComboBoxEx
							AutomationProperties.Name="{helpers:ResourceString Name=ShowStatusCenterButton}"
							ItemsSource="{x:Bind ViewModel.StatusCenterVisibilityOptions.Values}"
							SelectedItem="{x:Bind ViewModel.SelectedStatusCenterVisibilityOption, Mode=TwoWay}" />
					</wctcontrols:SettingsCard>
				</wctcontrols:SettingsExpander.Items>
			</wctcontrols:SettingsExpander>

			<!--  Toolbar Customization  -->
			<wctcontrols:SettingsExpander Header="{helpers:ResourceString Name=Toolbar}">
				<wctcontrols:SettingsExpander.HeaderIcon>
					<PathIcon Data="{StaticResource App.Theme.PathIcon.Toolbar}" />
				</wctcontrols:SettingsExpander.HeaderIcon>

				<ToggleSwitch
					AutomationProperties.AutomationControlType="Custom"
					AutomationProperties.Name="{helpers:ResourceString Name=ShowToolbar}"
					IsOn="{x:Bind ViewModel.ShowToolbar, Mode=TwoWay}" />

				<wctcontrols:SettingsExpander.Items>
					<wctcontrols:SettingsCard
						Command="{x:Bind ViewModel.CustomizeToolbarCommand, Mode=OneWay}"
						Header="{helpers:ResourceString Name=CustomizeToolbarDescription}"
						IsClickEnabled="True">
						<wctcontrols:SettingsCard.ActionIcon>
							<FontIcon Glyph="&#xE8A7;" />
						</wctcontrols:SettingsCard.ActionIcon>
					</wctcontrols:SettingsCard>
				</wctcontrols:SettingsExpander.Items>
			</wctcontrols:SettingsExpander>

			<!--  Show Status Bar  -->
			<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=ShowStatusBar}">
				<wctcontrols:SettingsCard.HeaderIcon>
					<PathIcon Data="{StaticResource App.Theme.PathIcon.StatusBar}" />
				</wctcontrols:SettingsCard.HeaderIcon>
				<ToggleSwitch
					AutomationProperties.AutomationControlType="Custom"
					AutomationProperties.Name="{helpers:ResourceString Name=ShowStatusBar}"
					IsOn="{x:Bind ViewModel.ShowStatusBar, Mode=TwoWay}" />
			</wctcontrols:SettingsCard>
		</StackPanel>
	</Grid>
</Page>