2014-09-19 83 views
0

我有一個WPF應用程序,其中有條形圖。在wpf中突出顯示不同顏色的選定欄

默認情況下,酒吧的顏色是鋼藍色。

我想,其中當用戶選擇一個條,應當以不同的顏色,即紅色高亮顯示,以指示是指該產品的功能性。請指導我如何實現這一目標。

目前我已經使用了以下columndatapoint風格。

<Style 
 
       x:Key="MyColumnDataPointStyle" 
 
       TargetType="charting:ColumnDataPoint"> 
 
     <Setter Property="Background" Value="SteelBlue"/> 
 
     <Setter Property="Template"> 
 
      <Setter.Value> 
 
       <ControlTemplate TargetType="charting:ColumnDataPoint"> 
 
        <Border 
 
           BorderBrush="{TemplateBinding BorderBrush}" 
 
           BorderThickness="{TemplateBinding BorderThickness}" 
 
           Opacity="1" 
 
           x:Name="Root"> 
 
         <VisualStateManager.VisualStateGroups> 
 
          <VisualStateGroup x:Name="CommonStates"> 
 
           <VisualStateGroup.Transitions> 
 
            <VisualTransition GeneratedDuration="0:0:0.1"/> 
 
           </VisualStateGroup.Transitions> 
 
           <VisualState x:Name="Normal"/> 
 
           <VisualState x:Name="MouseOver"> 
 
            <Storyboard> 
 
             <DoubleAnimation 
 
                Storyboard.TargetName="MouseOverHighlight" 
 
                Storyboard.TargetProperty="Opacity" 
 
                To="0.6" 
 
                Duration="0"/> 
 
            </Storyboard> 
 
           </VisualState> 
 
          </VisualStateGroup> 
 
          <VisualStateGroup x:Name="SelectionStates"> 
 
           <VisualStateGroup.Transitions> 
 
            <VisualTransition GeneratedDuration="0:0:0.1"/> 
 
           </VisualStateGroup.Transitions> 
 
           <VisualState x:Name="Unselected"/> 
 
           <VisualState x:Name="Selected"> 
 
            <Storyboard> 
 
             <DoubleAnimation 
 
                Storyboard.TargetName="SelectionHighlight" 
 
                Storyboard.TargetProperty="Opacity" 
 
                To="0.6" 
 
                Duration="0"/> 
 
            </Storyboard> 
 
           </VisualState> 
 
          </VisualStateGroup> 
 
          <VisualStateGroup x:Name="RevealStates"> 
 
           <VisualStateGroup.Transitions> 
 
            <VisualTransition GeneratedDuration="0:0:0.5"/> 
 
           </VisualStateGroup.Transitions> 
 
           <VisualState x:Name="Shown"> 
 
            <Storyboard> 
 
             <DoubleAnimation 
 
                Storyboard.TargetName="Root" 
 
                Storyboard.TargetProperty="Opacity" 
 
                To="1" 
 
                Duration="0"/> 
 
            </Storyboard> 
 
           </VisualState> 
 
           <VisualState x:Name="Hidden"> 
 
            <Storyboard> 
 
             <DoubleAnimation 
 
                Storyboard.TargetName="Root" 
 
                Storyboard.TargetProperty="Opacity" 
 
                To="0" 
 
                Duration="0"/> 
 
            </Storyboard> 
 
           </VisualState> 
 
          </VisualStateGroup> 
 
         </VisualStateManager.VisualStateGroups> 
 
         <Grid 
 
            Background="{TemplateBinding Background}"> 
 
          <Rectangle> 
 
           <Rectangle.Fill> 
 
            <LinearGradientBrush> 
 
             <GradientStop 
 
                Color="#77ffffff" 
 
                Offset="0"/> 
 
             <GradientStop 
 
                Color="#00ffffff" 
 
                Offset="1"/> 
 
            </LinearGradientBrush> 
 
           </Rectangle.Fill> 
 
          </Rectangle> 
 
          <Border 
 
             BorderBrush="#ccffffff" 
 
             BorderThickness="1"> 
 
           <Border 
 
              BorderBrush="#77ffffff" 
 
              BorderThickness="1"/> 
 
          </Border> 
 
          <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/> 
 
          <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/> 
 
         </Grid> 
 
         <ToolTipService.ToolTip> 
 
          <StackPanel> 
 
           <ContentControl 
 
              Content="{TemplateBinding FormattedIndependentValue}" 
 
              FontWeight="Bold"/> 
 
           <ContentControl 
 
              Content="{TemplateBinding FormattedDependentValue}"/> 
 
          </StackPanel> 
 
         </ToolTipService.ToolTip> 
 
        </Border> 
 
       </ControlTemplate> 
 
      </Setter.Value> 
 
     </Setter> 
 
    </Style>

回答

0

要在MVVM模式我想創建一個視圖模型類爲您ColumnDataPoint做到這一點。 此ViewModel包含一個bool屬性,例如稱爲IsActive。 然後,您可以綁定在酒吧的的DataContext到視圖模型,並在你的風格,你可以設置綁定到該物業的DataTrigger。 要更改屬性,你可以創建一個在您的ViewModel一個命令,它會一下吧

這裏的時候被執行是一個小例子:

 <Rectangle Fill="SteelBlue" 
       DataContext="{Binding YourViewModel}"> 
     <Rectangle.Style> 
      <Style TargetType="Rectangle"> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsActive}" Value="true"> 
         <Setter Property="Stroke" Value="Chartreuse"/> 
         <Setter Property="StrokeThickness" Value="5"/> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Rectangle.Style> 
     <i:Interaction.Triggers> 
      <i:EventTrigger EventName="MouseLeftButtonUp"> 
       <command:EventToCommand Command="{Binding ClickingBarCommand}"/> 
      </i:EventTrigger> 
     </i:Interaction.Triggers> 
    </Rectangle> 

要使用「i」和「命令」命名空間中必須添加

的xmlns:ⅰ= 「CLR-名稱空間:System.Windows.Interactivity;裝配= System.Windows.Interactivity」 的xmlns:命令= 「http://www.galasoft.ch/mvvmlight」

希望這對您有所幫助

歡呼

相關問題