如何在Arc上填充Arc?

时间:2015-08-07 04:38:16

标签: wpf xaml

目前,我有两个弧,但是有一个错误颜色的小边框(见黑色箭头): 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>

enter image description here 请给我一个删除小红色边框的解决方案(见黑色箭头)?谢谢你的帮助吗?

2 个答案:

答案 0 :(得分:1)

您可以将灰色弧的ArcThickness设置为15.1,并查看是否删除了红色轮廓。

如果你给两个弧都是一个像素的白色边框会怎么样?

选项1:修改ViewModel

您的ViewModel是否可以修改为像这样处理Arcs:

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));
    }
}

(我假设构造函数首先使用StartAngle,然后是EndAngle)。 Arcs是您现有的Arc列表,ArcViewModels是您将View绑定到的位置。它将每个弧的StartAngle设置为前一个的EndAngle。

我在一个简单的应用程序中试过这个并且它工作正常,显然你必须对你的视图模型进行一些修改来处理用于绑定的弧。

选项2:通过IValueConverter运行Arcs集合

您需要创建一个这样的Converter类:

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();
    }
}

然后将以下内容添加到视图中的引用:

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

资源:

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

并在任何绑定到arcs集合的地方使用转换器:

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

您可能需要修改某些类型才能使其与ViewModel一起使用,但希望这可以帮助您入门。

答案 1 :(得分:0)

你有一个弧在另一个上面。只需将它们修改为不重叠:

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