This needs adding to the top section of the .xaml file
xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"
A vertical list of legends (unbound)
    <!-- THE CHART LEGENDS -->
     <telerikPrimitives:RadLegendControl >
        <telerikPrimitives:RadLegendControl.LegendItems>
            <telerikPrimitives:LegendItem Fill="#1E98E4" Stroke="#1E98E4" Title="Temperature 1"/>
            <telerikPrimitives:LegendItem Fill="#FFC500" Stroke="#FFC500" Title="Temperature 2"/>
            <telerikPrimitives:LegendItem Fill="#FF2A00" Stroke="#FF2A00" Title="Temperature 3"/>
        </telerikPrimitives:RadLegendControl.LegendItems>
    </telerikPrimitives:RadLegendControl>

Displaying Legends Horizontally

You can set a height and width of the telerikPrimitives:RadLegendControl, thus causing them to be laid out to fit

Example with horizontally laid out Legends and styling of the legend items
    <!-- THE CHART LEGENDS -->
    <telerikPrimitives:RadLegendControl Canvas.Left="10" Canvas.Top="470"  Width="780" Height="40" >
        <!--Style the Legend Items -->
        <telerikPrimitives:RadLegendControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Ellipse Fill="{Binding Fill}" Stroke="{Binding Stroke}" StrokeThickness="1" Width="10" Height="10"/>
                    <TextBlock Text="{Binding Title}" Foreground="{Binding Fill}" Margin="3,0,26,0" >  <!-- L T R B -->
                    </TextBlock>
                </StackPanel>
            </DataTemplate>
        </telerikPrimitives:RadLegendControl.ItemTemplate>
        <!-- Create the individual Legend Items -->
        <telerikPrimitives:RadLegendControl.LegendItems >
            <telerikPrimitives:LegendItem Fill="#F48267" Stroke="#F48267" Title="Temperature 1"/>
            <telerikPrimitives:LegendItem Fill="#18E600" Stroke="#18E600" Title="Temperature 2"/>
            <telerikPrimitives:LegendItem Fill="#64F4FF" Stroke="#64F4FF" Title="Temperature 3"/>
            <telerikPrimitives:LegendItem Fill="#F4FF67" Stroke="#F4FF67" Title="Temperature 4"/>
        </telerikPrimitives:RadLegendControl.LegendItems>
    </telerikPrimitives:RadLegendControl>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *