Использование стилей в шаблоне данных - PullRequest
Новая
       35

Использование стилей в шаблоне данных

5 голосов
/ 17 ноября 2011

У меня есть класс с именем item, и он содержит только два свойства.Я буду отображать их на экране в виде кнопок со стилем.Этот вопрос относится к тому, как я могу стилизовать кнопку на основе значения IsSelected, когда элемент, на который я хочу воздействовать, находится в стиле, а не в шаблоне данных.Я уже пробовал использовать триггер, но не смог заставить его работать.

Класс указан ниже. 

public class Item : ObservableObject
{
    private string _title;
    private bool _isSelected;

    public string Title
    {
        get { return _title; }
        set
        {
            _title = value;
            RaisePropertyChanged("Title");
        }
    }

    public bool IsSelected
    {
        get { return _isSelected; }
        set
        {
            _isSelected = value;
            RaisePropertyChanged("IsSelected");
        }
    }
}

Я использую шаблон данных для отображения этих элементов в ItemsControls. 

<ItemsControl ItemsSource="{Binding Path=Items}" ItemTemplate="{StaticResource ResourceKey=ItemTemplate}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

Используя следующий стиль и шаблон данных. 

<Style x:Key="ItemButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="ButtonBorder" BorderThickness="2,2,2,0" BorderBrush="#AAAAAA"  CornerRadius="6,6,0,0"  Margin="2,20,0,0" Background="Black">
                    <ContentPresenter
                            VerticalAlignment="Center"  
                            HorizontalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<DataTemplate x:Key="ItemTemplate">
    <Button Height="60" Style="{StaticResource ItemButton}" Name="Button">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Path=Title}" 
                       HorizontalAlignment="Left" Margin="5,5,5,3" FontSize="25" Foreground="#6B6B6B" FontFamily="Arial" />
                <Button Style="{StaticResource NoChromeButton}" Margin="0,0,5,0">
                <Button.Content>
                    <Image Height="20" Source="/WpfApplication1;component/Image/dialogCloseButton.png"></Image>
                </Button.Content>
                <Button.ToolTip>
                    Close    
                </Button.ToolTip>
            </Button>
        </StackPanel>
    </Button>
</DataTemplate>

Мне нужно изменить фон «ButtonBorder» с черного на белый, когда IsSelected равно True, на объекте Item.

Я добавил триггер в шаблон данных. Это не работает, я думаю, это потому, что стиль переопределяет шаблон данных, таким образом, фон остается белым.Тем не менее, когда я пытаюсь сделать триггер в стиле, я не могу получить доступ к свойству IsSelected?

DataTemplate Trigger 

    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsSelected}" Value="True">
            <Setter TargetName="Button" Property="Background" Value="White"/>
        </DataTrigger>
    </DataTemplate.Triggers>

Стиль триггера 

    <Style.Triggers>
        <DataTrigger Binding="{Binding IsSelected}" Value="True">
            <Setter Property="Background" Value="White"/>
        </DataTrigger>
    </Style.Triggers>

Amя что-то упустил?

Ответы [ 2 ]

9 голосов
/ 17 ноября 2011

Сделайте ваш ButtonBorder.Background равным {TemplateBinding Background}, что означает, что он будет использовать любой цвет фона, назначенный шаблонной кнопке, затем вы можете изменить фон своей кнопки на основе триггера 

<Style x:Key="ItemButton" TargetType="Button">
    <Setter Property="Background" Value="Black" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="ButtonBorder" Background="{TemplateBinding Background}" ... >
                    <ContentPresenter ... "/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SelectableItemButton" TargetType="Button" BasedOn="{StaticResource ItemButton}">
    <Setter Property="Background" Value="Black" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsSelected}" Value="True">
            <Setter Property="Background" Value="White"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

<DataTemplate x:Key="ItemTemplate">
    <Button Height="60" Style="{StaticResource SelectableItemButton}">
        ...
    </Button>
</DataTemplate>

I 'm также создает стиль SelectableItemButton, который наследуется от ItemButton и просто реализует триггер

0 голосов
/ 17 ноября 2011

Если цель не должна быть «ButtonBorder» вместо «Button» в: 

<Setter TargetName="Button"....

Кроме того, для доступа к свойству IsSelected необходимо установить TargetType в стиле...

...