根据布尔值更改椭圆的颜色

问题描述：

<Grid Grid.Row="1" Width="500" Height="500"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Ellipse Fill="Red" HorizontalAlignment="Center" Height="25" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Center" Width="25"/> 
    <Ellipse Fill="Red" HorizontalAlignment="Center" Height="25" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Center" Width="25" Grid.Row="1"/> 
    <Ellipse Fill="Red" HorizontalAlignment="Center" Height="25" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Center" Width="25" Grid.Row="3"/> 
    <Ellipse Fill="Red" HorizontalAlignment="Center" Height="25" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Center" Width="25" Grid.Column="4"/> 
    <Ellipse Fill="Red" HorizontalAlignment="Center" Height="25" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Center" Width="25" Grid.Column="4" Grid.Row="4"/> 
</Grid>

鉴于上述XAML，我希望当属性为true时，点为绿色。我假设我会用DataTrigger做到这一点，但我可以想到的唯一方法就是将其复制到每个椭圆上。这对我来说似乎很难受，并且怀疑他们是否是更好的解决方案。每个椭圆都基于一个属性，但是它又像是很多重复的代码。理想情况下，我想要的是这个视图使用布尔值来反映“站”列表的状态，以确定它们是否可用。每个视图的状态都是单向的，在视图启动时不会改变。根据布尔值更改椭圆的颜色

我对WPF和XAML的新手提出了一个优雅的解决方案。每次我尝试一些东西时，我都会畏缩，因为它看起来像是一个彻头彻尾的黑客。

编辑：感谢@ Alastair的回答，我已经得到它的工作。

那么你会显示这些电台的列表？例如。彩色的圆圈又是他们的名字？ – 2013-04-22 03:34:21

没有。想象它更像一个地图传说。每个椭圆代表平面图上的一个亭子。 – 2013-04-22 03:39:07

我看到你的内部用户控件中有一个椭圆。你的外部UserControl的DataContext是否有一个IsAvailable属性？ – failedprogramming 2013-04-22 06:14:55

答

所以我会定制一个包含椭圆的UserControl。

然后，您可以将数据触发器放入UserControl。然后将自定义控件的DataContext绑定到您的布尔属性，然后将DataTrigger绑定到的。

因此，您可以保持您的XAML清洁。

编辑：

一个基本的用户控件。这应该在单独的文件中定义，而不是资源。只需右键单击项目 - >添加 - >新建项目...然后选择WPF UserControl。

<UserControl x:Class="Test_WPF.MyEllipseControl" 
      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" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid> 
     <Ellipse HorizontalAlignment="Center" 
        Height="25" 
        Margin="0,0,0,0" 
        Stroke="Black" 
        VerticalAlignment="Center" 
        Width="25" 
        Fill="Red"> 
      <Ellipse.Style> 
       <Style TargetType="Ellipse"> 
        <Style.Triggers> 
         <DataTrigger Binding="{Binding Path=IsAvailable}" 
            Value="True"> 
          <Setter Property="Fill" 
            Value="Green" /> 
         </DataTrigger> 
        </Style.Triggers> 
       </Style> 
      </Ellipse.Style> 
     </Ellipse> 
    </Grid> 
</UserControl>

，然后你会使用它：

<local:MyEllipseControl DataContext="{Binding Path=Station1}" />

其中local命名空间就是你的地方项目的命名空间。

好的。我想我明白了。让我们看看它是如何发展的。 – 2013-04-22 03:51:21

@lose_the_grimm：很酷，祝你好运。 – 2013-04-22 04:20:47

我已经更新了我的OP，以显示我的'UserControl'。我认为我所拥有的大部分是正确的，只是不确定如何实际使用它。 – 2013-04-22 04:46:50

答

另一种方法是将填充直接绑定到布尔值，并使用转换器根据需要更改样式。

你的转换可能是这个样子：

class StatusToColor : IValueConverter 
    { 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
      { 
       SolidColorBrush retColor = new SolidColorBrush(); 
       retColor.Color = System.Windows.Media.Color.FromRgb(0, 0, 0); 
       if ((bool)value) 
       { 
        retColor.Color = System.Windows.Media.Color.FromRgb(255, 0, 0); 
       } 
       else 
       { 
        retColor.Color = System.Windows.Media.Color.FromRgb(0, 128, 0); 
       } 
       return retColor; 
      } 

      public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
      { 
       throw new NotImplementedException(); 
      } 
}

然后，您可以在您的XAML资源定义转换器：

<Window>  
    <Window.Resources> 
     <c:StatusToColor x:Key="MyConverter"/> 
    </Window.Resources> 
...

并设置绑定这样：

<Ellipse Fill="{Binding SomeProperty, Converter={StaticResource MyConverter}}" HorizontalAlignment="Center" Height="25" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Center" Width="25"/>

根据布尔值更改椭圆的颜色

相关推荐