2013-04-22 51 views
0
<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的回答,我已經得到它的工作。

+0

那麼你會顯示這些電臺的列表?例如。彩色的圓圈又是他們的名字? – 2013-04-22 03:34:21

+0

沒有。想象它更像一個地圖傳說。每個橢圓代表平面圖上的一個亭子。 – 2013-04-22 03:39:07

+0

我看到你的內部用戶控件中有一個橢圓。你的外部UserControl的DataContext是否有一個IsAvailable屬性? – failedprogramming 2013-04-22 06:14:55

回答

6

所以我會定製一個包含橢圓的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命名空間就是你的地方項目的命名空間。

+0

好的。我想我明白了。讓我們看看它是如何發展的。 – 2013-04-22 03:51:21

+0

@lose_the_grimm:很酷,祝你好運。 – 2013-04-22 04:20:47

+0

我已經更新了我的OP,以顯示我的'UserControl'。我認爲我所擁有的大部分是正確的,只是不確定如何實際使用它。 – 2013-04-22 04:46:50

4

另一種方法是將填充直接綁定到布爾值,並使用轉換器根據需要更改樣式。

你的轉換可能是這個樣子:

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"/>