How to fill an Arc on an Arc other?

Question

Currently, I have two Arcs but there are small borders of the wrong color (see black arrow) : xaml:

<Window x:Class="WpfApplication9.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing">
<Grid Width="150" Height="150">
    <ed:Arc
                                        x:Name="BorderArc"
                                        ArcThickness="15"
                                        StrokeThickness="0"
                                        ArcThicknessUnit="Pixel"
                                        StartAngle="270"
                                        EndAngle="45"
                                        Fill="Red"
                                        Stretch="None"
                                        RenderTransformOrigin=".5 .5"
                                        Width="150"
                                        Height="150">
    </ed:Arc>
    <ed:Arc
                                        x:Name="Border"
                                        ArcThickness="15"
                                        StrokeThickness="0"
                                        ArcThicknessUnit="Pixel"
                                        StartAngle="270"
                                        EndAngle="30"
                                        Fill="Gray"
                                        Stretch="None"
                                        RenderTransformOrigin=".5 .5"
                                        Width="150"
                                        Height="150">
    </ed:Arc>
</Grid>

Please give me a solution for remove small red border (see black arrow)? Thanks for help me?

Answer 1

You could set the ArcThickness of the grey arc to 15.1, and see if that removes the red outline.

What happens if you give both arcs a white border of a single pixel?

Option 1: Modify the ViewModel

Could your ViewModel be modified to process the Arcs like this:

ArcViewModels = new List<SingleArcViewModel>();

for (var i = 0; i < Arcs.Count; i++)
{
    if (i == 0)
    {
        ArcViewModels.Add(new SingleArcViewModel(Arcs[i].StartAngle, Arcs[i].EndAngle));
    }
    else
    {
        ArcViewModels.Add(new SingleArcViewModel(Arcs[i - 1].EndAngle, Arcs[i].EndAngle));
    }
}

(I am assuming that the constructor takes StartAngle first, then EndAngle). Where Arcs is your existing list of Arcs, and ArcViewModels is what you will bind your View to. It has the StartAngle of each arc set to the EndAngle of the previous one.

I've tried this in a simple application and it works OK, obviously you will have to make some modifications to your view model to process the arcs for binding to.

Option 2: Run the Arcs collection through an IValueConverter

You'll need to create a Converter class like this:

public class ArcCollectionConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var arcsCollection = value as ArcViewModel[];
        if (arcsCollection == null)
            return value;

        var result = new List<ArcViewModel>();

        for (var i = 0; i < arcsCollection.Count(); i++)
        {
            if (i == 0)
            {
                result.Add(new SingleArcViewModel(arcsCollection[i].StartAngle, arcsCollection[i].EndAngle));
            }
            else
            {
                result.Add(new SingleArcViewModel(arcsCollection[i - 1].EndAngle, arcsCollection[i].EndAngle));
            }
        }

        return result;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Then add the following to the references in your View:

xmlns:cc="clr-namespace:LocalExperiment.Models"

The resources:

<Window.Resources>
    <cc:ArcCollectionConverter x:Key="ArcCollectionConverter" />
</Window.Resources>

And use the converter wherever you are binding to the arcs collection:

<ItemsControl ItemsSource="{Binding MyArcs, Converter={StaticResource ArcCollectionConverter}}"></ItemsControl>

You may need to modify some of the types to get it to work with your ViewModel, but hopefully this will get you started.

Answer 2

You have one arc on top of another. just modify them to not overlap:

<!-- I have ommited some properties -->
<ed:Arc StartAngle="30" EndAngle="45" Fill="Red" />
<ed:Arc StartAngle="275" EndAngle="30" Fill="Grey" />