How to style a polyline with data trigger?

[bergziege]

Hi,

I am trying to let my user klick on a polyline and then highlight it (change stroke color) to visualize selection state. The polyline draws perfectly, the mouse event fires and sets a IsSelected property in my view model. But I am not able to change the polyline appearance when IsSelect is set to true.

<Style x:Key="LinesStyle" TargetType="mapControl:MapItem">
  <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="mapControl:MapItem">
              <mapControl:MapPolyline Locations="{Binding StartEndLocations}"
                                      Visibility="{Binding IsVisibleInNetworkplan, Converter={StaticResource BoolToVisibilityConverter}}"
                                      Stroke="{Binding ActiveEndViewModel.Port, Converter={StaticResource DcPortToBrushConverter}, FallbackValue=Black}"
                                      StrokeThickness="4" MouseLeftButtonUp="OnSegmentClicked" 
                                      x:Name="Segment">
                  <mapControl:MapPolyline.Style>
                      <Style TargetType="mapControl:MapPolyline">
                          <Style.Triggers>
                              <DataTrigger Binding="{Binding IsSelected}" Value="True">
                                  <Setter Property="Stroke" Value="Red"></Setter>
                              </DataTrigger>
                          </Style.Triggers>
                      </Style>
                  </mapControl:MapPolyline.Style>
              </mapControl:MapPolyline>
          </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>

<mapControl:Map Name="_map">
  <mapControl:MapItemsControl ItemsSource="{Binding SegmentViewModels}"
                              ItemContainerStyle="{StaticResource LinesStyle}" />
  <!--ItemTemplate="{StaticResource LinesTemplate}"-->

It does not make any difference if I use the ItemTemplate or ItemContainerStyle. Neither seems to apply the style.

Do you have any hints for styling the polyline with data trigger (for showig the selection state)?

Thanks for the great work! debgz

[ClemensFischer]

There are a few things wrong with your approach. When you want to set an element's property by a Setter in a Style Trigger, you must not set a property value directly (like Stroke="{Binding …}"), but only by another Setter.

Besides that, the DataTrigger Binding must use RelativeSource to access the parent MapItem (if that is what you intended).

Something like this works:

<map:MapPolyline Locations="{Binding Locations}" StrokeThickness="3">
    <map:MapPolyline.Style>
        <Style TargetType="map:MapPolyline">
            <Setter Property="Stroke" Value="Red"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected,
                                       RelativeSource={RelativeSource AncestorType=map:MapItem}}"
                             Value="True">
                    <Setter Property="Stroke" Value="Green"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </map:MapPolyline.Style>
</map:MapPolyline>

Please also note that this is not the right place to ask basic questions about WPF or XAML.