SyleProblem:不能更改背景特定的按钮呢?按钮、背景、SyleProblem

2023-09-03 07:15:49 作者:久挽不留

在我有一个==> 用户控件

在那个用户控件==>一的ItemsControl

现在的ItemsControl 生成按钮的的ItemsSource 定给它。 我已经给了一些样式的按钮。

Now ItemsControl generating Button’s As per ItemsSource given to it. I have given some style for those buttons .

==>按钮的内部 Pages.xaml

==>和样式放在 DataPagerResourceDictionary.xaml

我一直使用用户控件在我的 Maindwindow.xaml 。 但我不能改变背景的特定的按钮根据内容按钮

I have using UserControl inside my Maindwindow.xaml. but i can't change Background of Particular Button based on Content Of Button.

您可以从 在这里下载完整的code 。

这低于code工作正常,如果我不给按钮提供样式。

This below code works fine if I do not provide style to button.

for (int i = 0; i < displayPages.pageControl.Items.Count; i++)
        {
            var container = displayPages.pageControl.ItemContainerGenerator.ContainerFromIndex(i) as ContentPresenter;
            var button = container.ContentTemplate.FindName("pageNumberButton", container) as Button;
            if (button.Content == "  3  ")
            {
                button.Background = Brushes.Red;
            }
        } 

我所提供的样式按钮下面code段里面 [有看insdie Pages.xaml 。

I have Provided style to button inside following Code snippet [Have look insdie Pages.xaml].

<ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button x:Name="pageNumberButton"  Style="{StaticResource TransparentButton}"   Content="{Binding Path=Page_Number}"></Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

或者看看下面code:

Or Have Look At Below Code:

MainWindow.xaml

<Window x:Class="StylingProblem.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:Local="clr-namespace:StylingProblem">
    <Grid>
        <Local:Pages x:Name="displayPages"></Local:Pages>
        <Button Content="Change Color Button" Height="23" HorizontalAlignment="Left" Margin="149,164,0,0" Name="button1" VerticalAlignment="Top" Width="133" Click="button1_Click" />
    </Grid>
</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window
    {
        ObservableCollection<PageNumber> pageCollection = new ObservableCollection<PageNumber>();

        public MainWindow()
        {
            InitializeComponent();
            pageCollection.Add(new PageNumber("  1  "));
            pageCollection.Add(new PageNumber("  2  "));
            pageCollection.Add(new PageNumber("  3  "));
            pageCollection.Add(new PageNumber("  4  "));
            pageCollection.Add(new PageNumber("  5  "));
            pageCollection.Add(new PageNumber("  6  "));

            this.DataContext = this;
        }

        public ObservableCollection<PageNumber> PageCollection
        {
            get
            {
                return this.pageCollection;
            }
            set
            {
                this.pageCollection = value;
            }
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            //Chage Color of Perticular button here
            //Suppose say change the color of button with content == "  3  "

            #region --  THIS CODE WORKS FINE IF I DON'T PROVIDE ANY STYLE TO BUTTON [see Pages.xaml]  --
            for (int i = 0; i < displayPages.pageControl.Items.Count; i++)
            {
                var container = displayPages.pageControl.ItemContainerGenerator.ContainerFromIndex(i) as ContentPresenter;
                var button = container.ContentTemplate.FindName("pageNumberButton", container) as Button;
                if (button.Content == "  3  ")
                {
                    button.Background = Brushes.Red;
                }
            } 
            #endregion


        }

Pages.xaml [用户控制]

<UserControl x:Class="StylingProblem.Pages"
             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" 
             mc:Ignorable="d" 
              >
    <UserControl.Resources>
        <ResourceDictionary Source="DataPagerResourceDictionary.xaml"/>
    </UserControl.Resources>
    <Grid>
        <ItemsControl Name="pageControl" ItemsSource="{Binding Path=PageCollection}">
            <ItemsControl.Template>
                <ControlTemplate TargetType="ItemsControl">
                    <Border >
                        <StackPanel>
                            <ItemsPresenter></ItemsPresenter>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </ItemsControl.Template>
            <ItemsControl.ItemsPanel x:Uid="pageItemTemplate">
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button x:Name="pageNumberButton" Style="{StaticResource TransparentButton}"  Content="{Binding Path=Page_Number}"></Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>
    </Grid>
</UserControl>

风格按钮:DataPagerResourceDictionary.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   >
    <Style TargetType="Button" x:Key="TransparentButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border  CornerRadius="2,2,2,2"  HorizontalAlignment="Center" x:Name="borderTemplate" Background="Transparent">
                        <ContentPresenter/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="borderTemplate"  Property="Border.BorderBrush" Value="Gray" />
                            <Setter TargetName="borderTemplate"  Property="Border.BorderThickness" Value="1" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="borderTemplate"  Property="Border.BorderBrush" Value="Lime" />
                        </Trigger>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter TargetName="borderTemplate"  Property="Border.Background" Value="#FD7" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="borderTemplate"  Property="Border.Background" Value="LightGray"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

由于...................................

Thanks...................................

推荐答案

正在overwritting在样式按钮的模板,所以背景颜色永远不会被使用。

You are overwritting the Button's Template in your Style, so the Background color never gets used

默认按钮模板看起来是这样的:

Default button template looks like this:

<Button Background="SomeColor">
    <Button.Content>
</Button>

和你overwritting模板说

And you are overwritting the template to say

<Border>
    <Button.Content>
</Border>

您需要将边框的背景颜色绑定到 {TemplateBinding背景} ,以便它使用按钮的背景颜色。

You need to bind the Border's Background color to the {TemplateBinding Background} so that it uses the Button's background color.

我也建议使用 DataTrigger 代替$一个C $ C后面来改变按钮的背景颜色。

I would also suggest using a DataTrigger instead of code behind to change the background color of the button.

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Transparent" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding }" Value="3">
            <Setter Property="Background" Value="Red" />
        </DataTrigger>
    </Style.Triggers>
</Style>   
 
精彩推荐
图片推荐