基於百分比填充橢圓

下面是代碼：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
    <Ellipse Width="400" Stroke="DodgerBlue" Height="400" StrokeThickness="75" Fill="Transparent"> 
    </Ellipse> 
</Grid>

說的橢圓是100％，如果20％的藍顏色應填寫只能做到這一點，並顯示橢圓形的中心（空區）的百分比文本。

編輯

我添加文本在中心顯示。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
      <Ellipse Width="400" Stroke="DodgerBlue" Height="400" StrokeThickness="75" Fill="Transparent"> 
</Ellipse> 
      <TextBlock VerticalAlignment="Center" 
         HorizontalAlignment="Center" 
         Text="20" 
         FontSize="125"/> 
     </Grid>

EDIT 2

這裏是怎麼它看起來像我試圖acheive：

enter image description here

這裏的橙色與20％填充。

來源

2014-03-14 Goofy

是否要填充藍色邊框或內部 - 當前透明的內容？ – Herdo

@Herdo現在顯示完全填滿的藍色，只應該填一下如果其中有20個（全部爲橢圓），也就是說如果80％則填充80％橢圓，內部空應該是 – Goofy

您可以設置百分比在TextBlock.Text屬性中（如果你使用的是mvvm設計模式，你可以使用綁定），對於Ellipse.StrokeThickness則使用TextBlock。文本屬性（或綁定），並應用轉換器將百分比轉換爲「StrokeThickness」的值。 – Herdo

可以在裝配Microsoft.Expression.Drawing

它具有像由startAngle和EndAngle其可以相應地被很好操縱性能使用的電弧控制的預設。

<es:Arc x:Name="arc" ArcThickness="3" ArcThicknessUnit="Pixel" EndAngle="360" Fill="Black" Height="270" Canvas.Left="101.94" Stroke="Black" StartAngle="0" UseLayoutRounding="False" Width="269.941" Canvas.Top="12" />

現在你可以使用這個控制做的是：只要看看兩個類似的弧線一個疊加等，顏色下面一（1弧）用藍，並給起點和終點的角度特性的紅色圓弧（第二弧），這會讓你的佈局看起來像它在設計二中提到的那樣。

原始用法：

<Canvas x:Name="canvas1" Margin="0,10,0,0" Height="300" Width="480" HorizontalAlignment="Center"> 
<es:Arc x:Name="arc" ArcThickness="3" ArcThicknessUnit="Pixel" Fill="Black" Height="100" Canvas.Left="0" Stroke="Blue" UseLayoutRounding="False" Width="100" Canvas.Top="0"/> 
</Canvas> 
<es:Arc x:Name="arc" ArcThickness="3" EndAngle="120" StartAngle="0" ArcThicknessUnit="Pixel" Fill="Blue" Height="100" Canvas.Left="0" Stroke="Blue" UseLayoutRounding="False" Width="100" Canvas.Top="0"/> 
</Canvas>

檢查this鏈接以及

來源

2014-03-14 07:42:51

請問您能否詳細說明，什麼是es？以及我的佈局應該如何？ – Goofy

es只是xaml頁面頂部的參考：xmlns：es =「clr-namespace：Microsoft.Expression.Shapes; assembly = Microsoft.Expression.Drawing」 –

您可以告訴我我的網格是怎樣的嗎？我很困惑，你的解決方案似乎工作 – Goofy

用戶控件版本將包括兩個部分：XAML +代碼隱藏。 XAML部分：

<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:Project.CustomControls" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core" 
mc:Ignorable="d" 
d:DesignHeight="40" 
d:DesignWidth="40"> 


<Grid Width="40" Height="40"> 
    <Ellipse StrokeThickness="3" Stroke="#FF89CE25"/> 
    <Path Stroke="Red" StrokeThickness="2" x:Name="arcPath"> 
     <Path.Data> 
      <PathGeometry> 
       <PathFigure StartPoint="20,1"> 
        <ArcSegment x:Name="myArc" SweepDirection="Clockwise" IsLargeArc="True" Point="20,1"/> 
       </PathFigure> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 
</Grid>

代碼隱藏文件（短版，無絨毛）：

public sealed partial class MyCustomControl : UserControl 
{ 


public double ProgressValue 
{ 
    get { return (double)GetValue(ProgressValueProperty); } 
    set { SetValue(ProgressValueProperty, value); } 
} 

// Using a DependencyProperty as the backing store for ProgressValue. This enables animation, styling, binding, etc... 
public static readonly DependencyProperty ProgressValueProperty = 
    DependencyProperty.Register("ProgressValue", typeof(double), typeof(MyCustomControl), new PropertyMetadata(0.0, OnProgressValueChanged)); 

private static void OnProgressValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
{ 
    //throw new NotImplementedException(); 
    MyCustomControl circularProgressBar = d as MyCustomControl; 
    if (circularProgressBar != null) 
    { 
     double r = 19; 
     double x0 = 20; 
     double y0 = 20; 
     circularProgressBar.myArc.Size = new Size(19, 19); 
     double angle = 90 - (double)e.NewValue/100 * 360; 
     double radAngle = angle * (PI/180); 
     double x = x0 + r * Cos(radAngle); 
     double y = y0 - r * Sin(radAngle); 

     if (circularProgressBar.myArc != null) 
     { 
      circularProgressBar.myArc.IsLargeArc = ((double)e.NewValue >= 50); 
      circularProgressBar.myArc.Point = new Point(x, y); 
     } 
    } 
} 

public MyCustomControl() 
{ 
    this.InitializeComponent(); 
}

}

現在，你可以把你的CustomControl到在任何地方您的XAML並將ProgressValue屬性綁定到相應的數據源。圓弧會自己重繪，並將按比例填充橢圓形狀的值（0-100的值）。

來源

2015-11-24 21:13:23 erikT

基於百分比填充橢圓

回答

相關問題