Styling a Checkbox as an Ellipse

I wanted to restyle a WPF Checkbox so that is used an Ellipse as a image. It also had to support the IsThreeState property and show a clear sign that the value is null.

The image above shows the different styles available (Grey: False, Green: True, White and Barred: Null).

<Style x:Key="EllipseCheckBoxStyle" TargetType="CheckBox">
 <Setter Property="SnapsToDevicePixels" Value="true"/>
 <Setter Property="OverridesDefaultStyle" Value="true"/>
 <Setter Property="Template">
   <Setter.Value>
     <ControlTemplate TargetType="CheckBox">
       <Border x:Name="Border" Width="32" Height="32" Background="Transparent" CornerRadius="1" BorderThickness="1" BorderBrush="DarkGray">
         <Grid>
           <Ellipse x:Name="MyEllipse" MinHeight="5" MinWidth="5" Stretch="Fill" Fill="{Binding Path=FilterValue, Converter={StaticResource BoolToRG}}"></Ellipse>
           <Line x:Name="Diag" Stroke="Transparent" X1="0" Y1="0" X2="1" Y2="1" Stretch="Fill"/>
         </Grid>
       </Border>
 
     <ControlTemplate.Triggers>
       <Trigger Property="IsChecked" Value="{x:Null}">
         <Setter TargetName="Diag" Property="Stroke" Value="Black" />
       </Trigger>
       <Trigger Property="IsMouseOver" Value="true">
         <Setter TargetName="Border" Property="Background" Value="Orange" />
       </Trigger>
     </ControlTemplate.Triggers>
   </ControlTemplate>
 </Setter.Value>
 </Setter>
</Style>

The converter itself is simply a Bool? to colour converter that I use. You could also set the colour as a Trigger on the control template itself on the IsChecked property like I did for the Null value.

Styling a ListView with a Horizontal ItemsPanel and a Header

I had to create a specific ListView for my WPF project. A Horizontal alignment of items, with a header column, containing a templated item with a templated checkbox. The final effect looks like this:

If we decompose the panel, here are the elements:
Black box: ListView with Template containing a Grid with 2 columns
Red box: The Header column in the ListView template on Grid.Column=”0″
Yellow box: The ListView item panel (ItemsPresenter) located on Grid.Column=”1″ containing an templates ItemsPanelTemplate which is a StackPanel with an Orientation=”Horizontal”.
Green box: The ListView’s ItemTemplate which is a StackPanel with an Orientation=”Vertical” containing a TextBlock with a RotateTransform LayoutTransform and a Templated Checkbox which uses an Ellipse as it’s main shape.

<ListView ItemsSource="{Binding OpUnitList}" Grid.Row="1" Name="FilterListBox">
 <ListView.ItemsPanel>
   <ItemsPanelTemplate>
     <StackPanel Orientation="Horizontal" IsItemsHost="True">
     </StackPanel>
   </ItemsPanelTemplate>
 </ListView.ItemsPanel>
 <ListView.ItemTemplate>
   <DataTemplate>
     <StackPanel Orientation="Vertical">
       <TextBlock Text="{Binding OpUnitName}" Width="60" Margin="2">
         <TextBlock.LayoutTransform>
           <RotateTransform Angle="-90"/>
         </TextBlock.LayoutTransform>
       </TextBlock>
       <CheckBox IsChecked="{Binding FilterValue}" Name="RgDot" IsThreeState="True" Style="{StaticResource EllipseCheckBoxStyle}"/>
     </StackPanel>
   </DataTemplate>
 </ListView.ItemTemplate>
 <ListView.Template>
   <ControlTemplate>
     <Grid HorizontalAlignment="Left"> 
       <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto"></ColumnDefinition>
         <ColumnDefinition Width="*"></ColumnDefinition>
       </Grid.ColumnDefinitions>
       <StackPanel Orientation="Vertical" Grid.Column="0">
         <TextBlock Margin="2" Height="60">OpUnit Name</TextBlock>
         <TextBlock Margin="2">Filter</TextBlock>
       </StackPanel>
       <ItemsPresenter Grid.Column="1"></ItemsPresenter>
     </Grid>
   </ControlTemplate>
 </ListView.Template>
</ListView>

WPF – DynamicDataDisplay – A Chart component that works

DynamicDataDisplay is really one of those components that make life easier for WPF programmers looking for a easy, free and performant chart.

With many functionalities integrated like a fit to view, screen shots and a quick help, it has a place in any application.

I’m crossposting the code from my answer on Stackoverflow.

To add it in Visual Studio, on the project’s References folder -> Add Reference. Add the DynamicDataDisplay.dll to your project.

The namespace for DDD is Namespace: xmlns:d3=”http://research.microsoft.com/DynamicDataDisplay/1.0″

XAML Used to create the graph.

 <d3:ChartPlotter Name="plotter" Background="White">
    <d3:ChartPlotter.Resources>
        <conv:Date2AxisConverter x:Key="Date2AxisConverter"/>
    </d3:ChartPlotter.Resources>
    <d3:ChartPlotter.HorizontalAxis>
        <d3:HorizontalDateTimeAxis Name="dateAxis"/>
    </d3:ChartPlotter.HorizontalAxis>
    <d3:Header Content="{Binding PlotHeader}"/>
    <d3:VerticalAxisTitle Content="Value"/>
    <d3:HorizontalAxisTitle Content="Date"/>
</d3:ChartPlotter>

The Date to Axis Converter I used for the Horizontal axis:

public class Date2AxisConverter : IValueConverter
{
    #region IValueConverter Members
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is DateTime && targetType == typeof(double))
        {
            return ((DateTime)value).Ticks / 10000000000.0;
            // See constructor of class Microsoft.Research.DynamicDataDisplay.Charts.DateTimeAxis
            // File: DynamicDataDisplay.Charts.Axes.DateTime.DateTimeAxis.cs

            // alternatively, see the internal class Microsoft.Research.DynamicDataDisplay.Charts.DateTimeToDoubleConversion

        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        // try Microsoft.Research.DynamicDataDisplay.Charts.DateTimeAxis.DoubleToDate
        throw new NotSupportedException();
    }

    #endregion
}

C# Code: Clearing Graph and Creating line graph, Here my StockasticProcessPoint is a structure with a field “DateTime t” and a field “Double value”. Adding multiple lines gives the chart presented in the image above.

using Microsoft.Research.DynamicDataDisplay;
using System.Collections.ObjectModel;
using Microsoft.Research.DynamicDataDisplay.DataSources;

public void ClearLines()
{
    var lgc = new Collection<IPlotterElement>();
    foreach (var x in plotter.Children)
    {
        if (x is LineGraph || x is ElementMarkerPointsGraph)
            lgc.Add(x);
    }

    foreach (var x in lgc)
    {
        plotter.Children.Remove(x);
    }
}

internal void SendToGraph() {

    IPointDataSource _eds = null;
    LineGraph line;

    ClearLines();

    EnumerableDataSource<StochasticProcessPoint> _edsSPP;
    _edsSPP = new EnumerableDataSource<StochasticProcessPoint>(myListOfStochasticProcessPoints);
    _edsSPP.SetXMapping(p => dateAxis.ConvertToDouble(p.t));
    _edsSPP.SetYMapping(p => p.value);
    _eds = _edsSPP;

    line = new LineGraph(_eds);
    line.LinePen = new Pen(Brushes.Black, 2);
    line.Description = new PenDescription(Description);
    plotter.Children.Add(line);
    plotter.FitToView();
}