时间戳

首页 > 解决方案 > 使用共享资源 XAML 覆盖 MVVM 中的特定命令按钮背景颜色

c# - 使用共享资源 XAML 覆盖 MVVM 中的特定命令按钮背景颜色

问题描述

如何在不在 SharedResources.xaml 中创建一组新样式的情况下更改特定按钮的背景颜色？

按钮图片

在下图中，它显示了使用 SharedResource.xaml 中相同样式的三个按钮。我的目标是仅将第二个按钮的颜色从“WhiteSmoke”更改为“我选择的紫色/颜色”。

按钮图片

MainWindowViewModel.cs

这些按钮的样式在SharedResources.xaml中。

        protected override void CreateCommands()
    {
        this.Commands.Add(new CommandViewModel("First Button", new DelegateCommand(p => this.BtnOne())));

        this.Commands.Add(new CommandViewModel("Second Button", new DelegateCommand(p => this.BtnTwo())));

        this.Commands.Add(new CommandViewModel("Third Button", new DelegateCommand(p => this.BtnThree())));
    }

共享资源.saml

背景颜色是“WhiteSmoke”。这是我只想为第二个按钮（或任何特定按钮）覆盖的颜色，而无需在 SharedResources.xaml 中创建另一组样式。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:System">

<!-- Navigation Style for Buttons -->
<DataTemplate x:Key="CommandsTemplate">
    <ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Center">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" Width="180" Height="40" BorderThickness="1" FontSize="20" FontStyle="Oblique" Background="WhiteSmoke" Margin="8,8,0,0">
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</DataTemplate>

主窗口.xaml

按钮绑定在“HeaderedContentControl”的“内容”中，按钮的样式绑定在“ContentTemplate”中。

<Window x:Class="System.MainWindow"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:System"
    mc:Ignorable="d" Title="{Binding Path=DisplayName}" Height="550" Width="1080">

<!-- Connect this xaml to SharedResources -->
<Window.Resources>
    <ResourceDictionary Source="SharedResources.xaml" />
</Window.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="4" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Border Height="60">
        <HeaderedContentControl Content="{Binding Path=Commands}" ContentTemplate="{StaticResource CommandsTemplate}" />
    </Border>
    <Border Grid.Row="2">
        <HeaderedContentControl Content="{Binding Path=ViewModels}" ContentTemplate="{StaticResource WorkspacesTemplate}" />
    </Border>
</Grid>

标签： c#wpfvisual-studiobuttonmvvm

解决方案

只需使用 BasedOn 属性来继承现有资源样式或默认资源样式：

<Window.Resources>

    <!-- Default button style is blue text on a white background -->
    <Style TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="Blue" />
        <Setter Property="Background" Value="White" />
    </Style>

</Window.Resources>

<!-- Button with blue text on a yellow background -->
<Button Content="Hello World" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button.Style>
        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
            <Setter Property="Background" Value="Yellow" />
        </Style>
    </Button.Style>
</Button>

推荐阅读