Measurement Studio for .NET Languages

cancel
Showing results for 
Search instead for 
Did you mean: 

Modify WPF Legend Glyphs

Solved!
Go to solution

Hi,

How can i modify the events or toggle button properties of WPF Legend Glyphs?
ie.: I would like plot color change with toggle button click, and not the visibility property.

Or how can i change a Plot color if i clicked with mouse on the plotname?

And how to modify the TextBox that contains the plotname to IsReadOnly?

0 Kudos
Message 1 of 7
(4,070 Views)
Solution
Accepted by topic author galtamas88


how to modify the TextBox that contains the plotname to IsReadOnly?

The text box is controlled by the LabelTemplate property, so one option to disable plot label editing is to switch to a text block:

 

    <Grid.Resources>
        <DataTemplate x:Key="ReadOnlyPlotLabelTemplate">
            <TextBlock Text="{Binding}" />
        </DataTemplate>
        ...
    </Grid.Resources>

    <ni:Graph x:Name="graph">
        <ni:Graph.Plots>
            <ni:​Plot Label="Plot Label"
                     LabelTemplate="{StaticResource ReadOnlyPlotLabelTemplate}" />
        </ni:Graph.Plots>
    </ni:Graph>

 

How can i modify the events or toggle button properties of WPF Legend Glyphs?
ie.: I would like plot color change with toggle button click, and not the visibility property.

Or how can i change a Plot color if i clicked with mouse on the plotname?


The default data template used by the legend for plots is responsible for binding plot visibility to the toggle button. To change this, you can define a custom data template for plot legend items. You could use a simple template, and capture the routed button events at the level of the legend (shown below); or you could embed the logic in the custom template itself with a converter or other code.

 

    <Grid.Resources>
        ...
        <DataTemplate DataType="{x:Type ni:​Plot}">
            <StackPanel Orientation="Horizontal">
                <Button Width="{Binding GlyphSize.Width, RelativeSource={RelativeSource AncestorType={x:Type ni:Legend}, Mode=FindAncestor}}"
                        Height="{Binding GlyphSize.Height, RelativeSource={RelativeSource AncestorType={x:Type ni:Legend}, Mode=FindAncestor}}">
                    <niPrimitives:LegendGlyph Renderer="{Binding ActualRenderer}"
                                              Background="{Binding ItemBackground, RelativeSource={RelativeSource AncestorType={x:Type ni:Legend}, Mode=FindAncestor}}" />
                </Button>
                <ContentPresenter Margin="3"
                                  VerticalAlignment="Center"
                                  Content="{Binding Label}"
                                  ContentTemplate="{Binding LabelTemplate}" />
            </StackPanel>
        </DataTemplate>
    </Grid.Resources>

    ...

    <ni:Legend Button.Click="OnLegendItemClicked"
               ItemsSource="{Binding ElementName=graph, Path=AllPlots}" />

 

Also, these related questions may be useful as references:

~ Paul H
Message 2 of 7
(4,024 Views)

Thank you Paul!

This is a good solution! Working perfectly!

0 Kudos
Message 3 of 7
(4,011 Views)

hi, paul. I use this method to modify my legend glyphs. And i can change the margin of ToggleButton and textblock like below.

 

        <DataTemplate DataType="{x:Type ni:Plot}">
            <StackPanel Orientation="Horizontal">
                <ToggleButton Margin="3,0,0,0"
                              IsChecked="{Binding Visibility, Converter={StaticResource VisibilityToBoolean}}"
                              Width="{Binding GlyphSize.Width, RelativeSource={RelativeSource AncestorType={x:Type ni:Legend}, Mode=FindAncestor}}"
                              Height="{Binding GlyphSize.Height, RelativeSource={RelativeSource AncestorType={x:Type ni:Legend}, Mode=FindAncestor}}"
                              Padding="0">
                    <niPrimitives:LegendGlyph Renderer="{Binding ActualRenderer}"
                                              Background="{Binding ItemBackground, RelativeSource={RelativeSource AncestorType={x:Type ni:Legend}, Mode=FindAncestor}}" />
                </ToggleButton>
                <TextBlock Margin="0"
                           VerticalAlignment="Center"
                           Foreground="{Binding Renderer.PlotRenderers[0].Stroke}"
                           Opacity="{Binding Visibility, Converter={StaticResource VisibilityToOpacity}}"
                           Text="{Binding Label}">
                </TextBlock>
            </StackPanel>
        </DataTemplate>

 

Now i use one legend to display WaveGraph.AllPlots  and another one to display WaveGraph.Children like the picture below. I just want to modify the margin of WaveGraph.Children as same as WaveGraph.AllPlots. How can

 i change the DataTemplate?

1.png

0 Kudos
Message 4 of 7
(2,736 Views)

The Legend uses an ItemsControl, so the normal WPF data template resolution applies. In this case, you would want to add data templates for the cursor types you are using, just like the custom DataType="{x:Type ni:Plot}" you have now.

 

For reference, here are the default data templates for all of the cursor types:

 

<DataTemplate DataType="{x:Type ni:Cursor}">
    <StackPanel Margin="0,0,4,0" Orientation="Horizontal">
        <ToggleButton Style="{StaticResource LegendGlyphVisibilityToggle}">
            <niPrimitives:LegendGlyph Style="{StaticResource LegendGlyphWithBackground}" />
        </ToggleButton>

        <ContentPresenter Style="{StaticResource LegendLabelPresenter}" Content="{Binding Label}" />
        <TextBlock VerticalAlignment="Center"
                   Text=" :"
                   Visibility="{Binding Label, Converter={StaticResource EmptyToCollapsedVisibility}}"
                   />
        <TextBlock VerticalAlignment="Center">
            <TextBlock.Text>
                <MultiBinding Converter="{StaticResource ValueFormatterMultiConverter}"
                              ConverterParameter=" {0} ({1})"
                              >
                    <Binding Path="ValuePresenter" />
                    <Binding Path="Value" />
                    <Binding Path="ActualPlot.Label" FallbackValue="&#x2014;" />
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
    </StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type ni:RangeCursor}">
    <StackPanel Margin="0,0,4,0" Orientation="Horizontal">
        <ToggleButton Style="{StaticResource LegendGlyphVisibilityToggle}">
            <niPrimitives:LegendGlyph Style="{StaticResource LegendGlyphWithBackground}" />
        </ToggleButton>

        <ContentPresenter Style="{StaticResource LegendLabelPresenter}" Content="{Binding Label}" />
        <TextBlock VerticalAlignment="Center"
                   Text=" :"
                   Visibility="{Binding Label, Converter={StaticResource EmptyToCollapsedVisibility}}"
                   />
        <TextBlock VerticalAlignment="Center">
            <TextBlock.Text>
                <MultiBinding Converter="{StaticResource ValueFormatterMultiConverter}"
                              ConverterParameter=" &#x2194;{0} "
                              >
                    <Binding Path="ValuePresenter" />
                    <Binding Path="ActualHorizontalRange" />
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>

        <TextBlock VerticalAlignment="Center">
            <TextBlock.Text>
                <MultiBinding Converter="{StaticResource ValueFormatterMultiConverter}"
                              ConverterParameter=" &#x2195;{0} "
                              >
                    <Binding Path="ValuePresenter" />
                    <Binding Path="ActualVerticalRange" />
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
    </StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type ni:MultiPlotCursor}">
    <StackPanel Margin="0,0,4,0" Orientation="Horizontal">
        <ToggleButton Style="{StaticResource LegendGlyphVisibilityToggle}">
            <niPrimitives:LegendGlyph Style="{StaticResource LegendGlyphWithBackground}" />
        </ToggleButton>

        <Expander Style="{StaticResource ExpanderStyle}"
                  VerticalAlignment="Center"
                  Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type ni:Legend}, Mode=FindAncestor}}"
                  >
            <Expander.Header>
                <StackPanel Orientation="Horizontal">
                    <ContentPresenter Style="{StaticResource LegendLabelPresenter}"
                                      Content="{Binding Label}"
                                      />
                    <TextBlock VerticalAlignment="Center"
                               Text=" : "
                               Visibility="{Binding Label, Converter={StaticResource EmptyToCollapsedVisibility}}"
                               />
                    <TextBlock VerticalAlignment="Center">
                        <TextBlock.Text>
                            <MultiBinding Converter="{StaticResource ValueFormatterMultiConverter}">
                                <Binding Path="ValuePresenter" />
                                <Binding Path="AxisValue" />
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Expander.Header>

            <ItemsControl ScrollViewer.VerticalScrollBarVisibility="Disabled"
                          Margin="-1,0,0,0"
                          IsTabStop="False"
                          ItemsSource="{Binding Values}"
                          >
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock>
                            <TextBlock.Text>
                                <MultiBinding Converter="{StaticResource ValueFormatterMultiConverter}"
                                              ConverterParameter=" {0} ({1})"
                                              >
                                    <Binding Path="DataContext.ValuePresenter"
                                             RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}"
                                             />
                                    <Binding Path="Value" />
                                    <Binding Path="PlotObserver.Label" />
                                </MultiBinding>
                            </TextBlock.Text>
                        </TextBlock>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Expander>
    </StackPanel>
</DataTemplate>

 

 

 

~ Paul H
0 Kudos
Message 5 of 7
(2,714 Views)

Thank you so much,paul! Could you please share me the code of StaticResource LegendGlyphWithBackground?

0 Kudos
Message 6 of 7
(2,708 Views)

Certainly! It is just a style that holds the relative source binding to the background, like in the Plot data template you already have:

 

<Style x:Key="LegendGlyphWithBackground" TargetType="{x:Type niPrimitivesGraphs:LegendGlyph}">
    <Setter Property="Background"
            Value="{Binding ItemBackground, RelativeSource={RelativeSource AncestorType=niGraphs:Legend, Mode=FindAncestor}}"
            />
    <Setter Property="Renderer" Value="{Binding}" />
</Style>

 

~ Paul H
0 Kudos
Message 7 of 7
(2,699 Views)