根据状态更改用户控件外观

时间:2011-03-17 15:29:23

标签: wpf data-binding user-controls wpf-controls

我有一个由四个重叠项组成的用户控件:2个矩形,一个椭圆和一个标签

<UserControl x:Class="UserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="50.1" Height="45.424" Background="Transparent" FontSize="24">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="3.303*" />
        <RowDefinition Height="40*" />
        <RowDefinition Height="2.121*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5.344*" />
        <ColumnDefinition Width="40.075*" />
        <ColumnDefinition Width="4.663*" />
    </Grid.ColumnDefinitions>
    <Rectangle Name="Rectangle1" RadiusX="5" RadiusY="5" Fill="DarkGray" Grid.ColumnSpan="3" Grid.RowSpan="3" />
    <Ellipse Name="ellipse1" Fill="{Binding State}" Margin="0.016,0.001,4.663,0" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Stroke="Black" IsEnabled="True" Panel.ZIndex="2" />
    <Label Name="lblNumber" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontWeight="Bold" FontSize="24" Grid.Column="1" Grid.Row="1" Padding="0" Panel.ZIndex="3">9</Label>
    <Rectangle Grid.Column="1" Grid.Row="1" Margin="0.091,0,4.663,0" Fill="Blue" Name="rectangle2" Stroke="Black" Grid.ColumnSpan="2" Panel.ZIndex="1" />
</Grid>

这是我想要控制用户控件状态的业务对象:

Imports System.Data
Imports System.ComponentModel

Public Class BusinessObject
    Implements INotifyPropertyChanged
    Public logger As log4net.ILog

    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Private _state As States
    Public Enum States
        State1
        State2
        State3
    End Enum

    Public Property State() As States
        Get
            Return _state
        End Get
        Set(ByVal value As States)
            If (value <> _state) Then
                _state = value
                RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("State"))
            End If

        End Set
    End Property

    Protected Sub OnPropertyChanged(ByVal name As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(name))
    End Sub

我希望能够在后面的代码中更改业务对象的状态,并在我的usercontrol中更改多个形状的颜色。我不确定如何进行绑定。我在后面的代码中设置了用户控件的datacontext,但不确定是否正确。我是WPF和编程的新手,我不知道从哪里开始。任何建议都将非常感谢!!

2 个答案:

答案 0 :(得分:1)

一种简单的方法是使用值转换器。基本上,这是一个允许您绑定BusinessObject中的值的类,并且根据值的不同,您将返回不同的画笔。

Here是一个示例,向您展示如何操作。

[ValueConversion(typeof(States), typeof(Brush))]
public class ColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
      object parameter, CultureInfo culture)
  {
     /* return a different brush depending on the state */
  }
}

然后你这样绑定它:

<Ellipse Fill="{Binding State,  Converter={StaticResource colorConverter} />

请查看我上面提供的链接以查看完整示例。

这种方式优于Rachel的答案是它是一个通用的实现,所以如果你想让它适用于不同的对象(矩形,椭圆等等),你不必为每个形状创建一个模板。 ...)。但是Rachel的答案 - 即使用模板也很好,因为它不需要任何代码。

答案 1 :(得分:0)

您将基于State属性创建触发器,如果​​它等于StateX,您将更改颜色。例如:

<Rectangle>
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding State} "
                             Value="{x:Static localNamespace:States.State1}">
                    <Setter Property="Fill" Value="Red" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

localNamespace您必须在<UserControl>标记中定义自己。像<UserControl xmlns:localNamespace="clr-namespace:MyNamespace.MyClassWithStateEnum;assembly=MyNamespace"

这样的东西