Thực hiện ProgressRing trong MahApps.Metro Nhỏ hơn

Question

Dường như điều khiển Progressive của MahApps.Metro mặc định là Kích thước tối thiểu là 60x60.

Có một thuộc tính cho ProgressRing được gọi là "IsLarge", nhưng ngay cả khi nó được đặt thành "False" thì dường như không ảnh hưởng đến việc có thể thực hiện cho ProgressRing nhỏ hơn 60x60.

Thay đổi đáng kể các thuộc tính Chiều cao và Chiều rộng cũng không ảnh hưởng đến điều này.

Nhìn GitHUb như mã C# thực tế cho ProgressRing, có vẻ như có một số thuộc tính ảnh hưởng đến đường kính elip, vv, nhưng các thuộc tính này là thuộc tính riêng và không thể được đặt từ các cuộc gọi bên ngoài.

Làm cách nào để tôi có thể làm việc này nhỏ hơn? Nói 20x20 hoặc 30x30?

Trong mã bên dưới, tôi chỉ định IsLarge = False và đặt kích thước là 30x30 nhưng vẫn được đặt mặc định là 60x60.

<Window x:Class="WpfApplication3.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.MergedDictionaries> 
       <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" /> 
       <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" /> 
       <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> 
       <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Orange.xaml" /> 
       <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> 
      </ResourceDictionary.MergedDictionaries> 
     </ResourceDictionary> 
    </Window.Resources> 
     <Grid> 
      <Controls:ProgressRing IsActive="True" IsLarge="False" Height="30" Width="30"></Controls:ProgressRing> 
     </Grid> 
</Window> 

Dưới đây là đoạn mã từ "ProgressRing.cs" tập tin tìm thấy trên GitHub - MahApps.Metro

namespace MahApps.Metro.Controls 
{ 
    [TemplateVisualState(Name = "Large", GroupName = "SizeStates")] 
    [TemplateVisualState(Name = "Small", GroupName = "SizeStates")] 
    [TemplateVisualState(Name = "Inactive", GroupName = "ActiveStates")] 
    [TemplateVisualState(Name = "Active", GroupName = "ActiveStates")] 
    public class ProgressRing : Control 


     private void SetMaxSideLength(double width) 
     { 
      MaxSideLength = width <= 60 ? 60.0 : width; 
     } 

     private void SetEllipseDiameter(double width) 
     { 
      if (width <= 60) 
      { 
       EllipseDiameter = 6.0; 
      } 
      else 
      { 
       EllipseDiameter = width * 0.1 + 6; 
      } 
     } 

     private void UpdateLargeState() 
     { 
      Action action; 

      if (IsLarge) 
       action =() => VisualStateManager.GoToState(this, "Large", true); 
      else 
       action =() => VisualStateManager.GoToState(this, "Small", true); 

      if (_deferredActions != null) 
       _deferredActions.Add(action); 

      else 
       action(); 
     } 

EDIT: MainWindow.xaml

<Grid> 
    <Controls:ProgressRing x:Name="PRing" IsLarge="False" MinHeight="15" MinWidth="15" Height="15" Width="15"></Controls:ProgressRing> 
</Grid> 

EDIT: MainWindow.xaml.cs

public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 
      PRing.EllipseDiameter = 5; 
     } 
    } 

Answer 1

Bạn phải tìm một phong cách cho ProgressRing và thiết lập cho mình những Width và Height. Đối với tôi, phong cách tọa lạc tại địa chỉ: MahApps.Metro master \ MahApps.Metro \ Themes \ ProgressRing.xaml:

<Style TargetType="{x:Type Controls:ProgressRing}"> 
    <Setter Property="Foreground" Value="{DynamicResource AccentColorBrush}"/> 
    <Setter Property="IsHitTestVisible" Value="False"/> 
    <Setter Property="HorizontalAlignment" Value="Center"/> 
    <Setter Property="VerticalAlignment" Value="Center"/> 
    <Setter Property="MinHeight" Value="30"/> 
    <Setter Property="MinWidth" Value="30"/> 

... 

Theo mặc định, có Width và Height của 60. Theo tôi hiểu, dễ dàng đặt Width và Height chỉ ảnh hưởng trực tiếp đến các dấu ba chấm.

EDIT:

Điều gì sẽ làm cho chiếc nhẫn thậm chí nhỏ hơn, bạn có thể chơi xung quanh với các thông số EllipseDiameter và EllipseOffset qua mã, bởi vì một XAML họ sẽ không có sẵn (như tin).

private void SetEllipseDiameter(double width) 
{ 
    if (width <= 60) 
    { 
     EllipseDiameter = 3.0; // as default 6.0 
    } 
    else 
    { 
     EllipseDiameter = width * 0.1 + 6; 
    } 
} 

private void SetEllipseOffset(double width) 
{ 
    if (width <= 60) 
    { 
     EllipseOffset = new Thickness(0, 12, 0, 0); // as default 24 
    } 
    else 
    { 
     EllipseOffset = new Thickness(0, width * 0.4 + 12, 0, 0); 
    } 
} 

EDIT2:

Để thiết lập các đường kính của Ellipse thể được thực hiện như sau. Chúng tôi có các thuộc tính EllipseDiameter setter công:

public double EllipseDiameter 
{ 
    get 
    { 
     return (double)GetValue(EllipseDiameterProperty); 
    } 

    set // default as private 
    { 
     SetValue(EllipseDiameterProperty, value); 
    } 
} 

Trong SetEllipseDiameter đang kiểm tra vào kích thước của Ellipse, nếu Width là dưới 60 sau đó thiết lập 6.0.Chúng tôi bình luận.

private void SetEllipseDiameter(double width) 
{ 
    //if (width <= 60) 
    //{ 
    // EllipseDiameter = 6.0; 
    //} 
    //else 
    //{ 
    // EllipseDiameter = width * 0.1 + 6; 
    //} 
} 

Và trong Style thiết lập các đường kính của Ellipse như thế:

<Setter Property="MinHeight" Value="30"/> 
<Setter Property="MinWidth" Value="30"/> 
<Setter Property="EllipseDiameter" Value="3.0" /> 

Cũng vậy với EllipseOffset. Ông cũng vậy, lúc đầu tin, và có kiểm tra một Width nhỏ hơn 60:

private void SetEllipseOffset(double width) 
{ 
    // you can drop this check 
    if (width <= 60) 
    { 
     EllipseOffset = new Thickness(0, 24, 0, 0); 
    } 
    else 
    { 
     EllipseOffset = new Thickness(0, width * 0.4 + 24, 0, 0); 
    } 
} 

Rèn các hoạt động này với các thông số này, bạn có thể cấu hình các Width và Height của ProgressRing kiểm soát.