How to resize dots on WPF chart?

Question

I am using Chart tool. Here is my wpf code:

<Window x:Class="UserGraphShow.GraphOutput"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    mc:Ignorable="d"

    Title="MainWindow" Height="446" Width="726" >

    <Grid>
        <DVC:Chart Name="Chart"  Grid.ColumnSpan="3" Background="Blue" Title="Line">
            <DVC:Chart.Series>
                <DVC:LineSeries Title=" Your Graph"  IndependentValueBinding="{Binding Path=Key}"  DependentValueBinding="{Binding Path=Value}" Opacity="0" />
            </DVC:Chart.Series>

            <DVC:Chart.DataContext >
                <Style TargetType="Grid" >
                    <Setter Property="Opacity" Value="0" />
                </Style>
            </DVC:Chart.DataContext>
            <DVC:Chart.Axes>
                <DVC:LinearAxis Orientation="Y" Minimum="-302" Maximum="0"/>
                <DVC:LinearAxis Orientation="X" Maximum="509" Minimum="0"/>
                <DVC:LinearAxis Visibility="Hidden"/>
            </DVC:Chart.Axes>
        </DVC:Chart>
        <Button x:Name="Button" Content="Show" HorizontalAlignment="Left" Margin="8,10,0,0" VerticalAlignment="Top" Width="75" Grid.Column="1" Height="22" Click="button_Click"/>
    </Grid>
</Window>

I am trying to display arrays of x[] and y[] as a plot. Here is code of a button:

private void button_Click(object sender, RoutedEventArgs e)
{
    var b = GetUserGraphUnfoInfo.FindXy("../../../Main_Logic/image.jpeg");
    var x = b[0];  // array of x
    var y = b[1]; // array of y
    var ls = new LineSeries
    {
        IndependentValueBinding = new Binding("Key"),
        DependentValueBinding = new Binding("Value")
    };

    var a = new KeyValuePair<int, int>[x.Length-1];
    for (var i = 0; i < x.Length-1; i++)
        a[i] = new KeyValuePair<int, int>(x[i], y[i]);

    ls.ItemsSource = a;
    Chart.Series.Clear();
    Chart.Series.Add(ls);        
}

Everything works ok, though the dots are too big, how do i remove them at all?

Here is what i get:

Answer 1

Create and apply a style to your data points, as below:

XAML:

<Window x:Class="WpfApplication342.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dvc="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:local="clr-namespace:WpfApplication342"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Window.DataContext>
    <PointCollection>1,10 2,20, 3,30</PointCollection>
</Window.DataContext>

<Window.Resources>

    <Style x:Key="LineDataPointStyle1" TargetType="{x:Type dvc:LineDataPoint}">
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="BorderBrush" Value="Gray"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Width" Value="64"/>
        <Setter Property="Height" Value="64"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type dvc:LineDataPoint}">
                    <Grid x:Name="Root" Opacity="1">
                        <Grid.ToolTip>
                            <ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
                        </Grid.ToolTip>
                        <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"/>
                        <Ellipse RenderTransformOrigin="0.661,0.321">
                            <Ellipse.Fill>
                                <RadialGradientBrush GradientOrigin="0.681,0.308">
                                    <GradientStop Color="Transparent"/>
                                    <GradientStop Color="#FF3D3A3A" Offset="1"/>
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Ellipse x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
                        <Ellipse x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Grid>
    <dvc:Chart>
        <dvc:LineSeries ItemsSource="{Binding}" 
                        DependentValuePath="Y"
                        IndependentValuePath="X" 
                        DataPointStyle="{DynamicResource LineDataPointStyle1}"/>
    </dvc:Chart>
</Grid>

Now you can manipulate the style in several ways to eliminate the dots: use transparent colors, set width and height to zero, or even modify the control template altogether. Setting width and height to zero: