页面中的绑定样式

Question

我有 Window1，有 2 页登录和注册。 页面上有一个复选框，App.xaml 中的 2 种样式是 LightCheckBoxStyle 和 DarkCheckBoxStyle。我希望样式取决于 bool LightStyle 属性的值。 即如果 LightStyle = true;则复选框是LightCheckBoxStyle，反之亦然，如果为假，则为DarkCheckBoxStyle。

App.xaml

<Application x:Class="COP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ModernButton="clr-namespace:ModernButton;assembly=ModernButton"
xmlns:local="clr-namespace:COP"
xmlns:local1="clr-namespace:COP.ViewModel"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="DefaultCheckBoxStyle" TargetType="local:UserCheckBox">
<Setter Property="BorderBrush" Value="#707070"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="Width" Value="30"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Margin" Value="0,10,0,0"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Background" Value="#C3C3C3"/>
<Style.Triggers>
<DataTrigger Binding="{Binding LightStyle}" Value="True">
<Setter Property="Background" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="LightCheckBoxStyle" TargetType="local:UserCheckBox" BasedOn="{StaticResource DefaultCheckBoxStyle}">
<Setter Property="Background" Value="White"></Setter>
</Style>
<Style x:Key="DarkCheckBoxStyle" TargetType="local:UserCheckBox" BasedOn="{StaticResource DefaultCheckBoxStyle}">
<Setter Property="Background" Value="#C3C3C3"></Setter>
</Style>
</Application.Resources>

登录.xaml

<Page x:Class="COP.Pages.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:local="clr-namespace:COP.Pages"
xmlns:local1="clr-namespace:COP"
mc:Ignorable="d" 
d:DesignHeight="450" d:DesignWidth="400"
Title="Login">
<Page.Resources>
<local1:BoolToStyle x:Key="Convert"></local1:BoolToStyle>
</Page.Resources>
<Grid Height="Auto">      
<local1:UserCheckBox Style="{StaticResource LightCheckBoxStyle}" x:Name="checkBox"></local1:UserCheckBox>
</Grid>
</Grid>

主视图模型.cs

class MainViewModel : INotifyPropertyChanged
{
private Page Login;
private Page Register;
private bool _lightStyle = true;
public bool LightStyle
{
get { return _lightStyle; }
set { _lightStyle = value; OnPropertyChanged(); }
}
private Page _currentPage;
public Page CurrentPage
{
get { return _currentPage; }
set { _currentPage = value; OnPropertyChanged(); }
}
private double _frameOpacity;
public double FrameOpacity
{
get { return _frameOpacity; }
set { _frameOpacity = value; OnPropertyChanged(); }
}
public MainViewModel()
{
Login = new Pages.Login();
Register = new Pages.Register();
FrameOpacity = 1;
CurrentPage = Login;
LightStyle = true;
}
public async void SlowOpacity(string page)
{
await Task.Factory.StartNew(() =>
{
for (double i = 1.0; i > 0.0; i -= 0.1)
{
FrameOpacity = i;
Thread.Sleep(50);
}
if (page == "Login")
CurrentPage = Login;
else
CurrentPage = Register;
for (double i = 0.0; i < 1.1; i += 0.1)
{
FrameOpacity = i;
Thread.Sleep(50);
}
});
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}

如果你需要，我仍然可以布置代码。BoolToStyle 是空的，因为我不知道如何实现它。

UserCheckBox.xaml.cs

public partial class UserCheckBox : UserControl, INotifyPropertyChanged
{
public UserCheckBox()
{
InitializeComponent();
MouseLeftButtonUp += delegate (object sender, MouseButtonEventArgs e) { IsChecked = !IsChecked; };
}
#region
private bool _IsChecked = false;
#endregion
#region
public bool IsChecked
{
get { return _IsChecked; }
private set { _IsChecked = value; OnPropertyChanged("IsChecked"); }
}
#endregion
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

登录.xaml.cs

public partial class Login : Page
{
public Login()
{
InitializeComponent();
DataContext = Application.Current.MainWindow.DataContext;
}
}

Answer 1

WPF 中Triggers有条件的 setter 样式。

对于你的方案，可以将默认Background属性设置为#C3C3C3，并在TrueLightStyle时将其更改为White。

使用以下样式 -

<Style x:Key="DefaultCheckBoxStyle" TargetType="local:UserCheckBox">
<Setter Property="BorderBrush" Value="#707070"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="Width" Value="30"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Margin" Value="0,10,0,0"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Background" Value="#C3C3C3"/>
<Style.Triggers>
<DataTrigger Binding="{Binding LightStyle}" Value="True">
<Setter Property="Background" Value="White"/>
</DataTrigger>                
</Style.Triggers>
</Style>