Question

我有Window1，共有2页的Login和Register。页面上有一个CheckBox，为此，来自App.xaml的2种样式是LightCheckBoxStyle和DarkCheckBoxStyle。我希望样式取决于bool LightStyle属性的值。即，如果LightStyle = true；那么CheckBox为LightCheckBoxStyle，如果为false，则为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>

Login.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>

MainViewModel.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));
}

Login.xaml.cs

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

}

Answer 1

Triggers在WPF中具有样式设置器。

对于您的情况，可以将默认的Background属性设置为#C3C3C3，并在White为LightStyle时将其更改为True。

使用以下样式-

     <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>

页面中的装订样式

1 个答案: