Machen Sie die ProgressRing in MahApps.Metro Smaller

Question

Es sieht aus wie die MahApps.Metro ProgressRing-Steuerelement standardmäßig auf eine Mindestgröße von 60x60.

Es gibt eine Eigenschaft für das ProgressRing namens "IsLarge", aber selbst wenn es auf "False" gesetzt ist, scheint es keinen Effekt zu haben, ProgressRing kleiner als 60x60 zu machen.

Das Ändern der Eigenschaften "Höhe" und "Breite" ändert dies natürlich auch nicht.

Wenn Sie GitHUb als tatsächlichen C# -Code für ProgressRing betrachten, sieht es so aus, als gäbe es mehrere Eigenschaften, die den Ellipsoiddurchmesser usw. beeinflussen. Diese Eigenschaften sind jedoch private Eigenschaften und können nicht von externen Aufrufen festgelegt werden.

Wie kann ich das kleiner machen? Sag 20x20 oder 30x30?

Im folgenden Code spezifiziere ich IsLarge = False und setze die Größe auf 30x30, aber immer noch auf 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> 

Im Folgenden sind Code-Schnipsel aus dem "ProgressRing.cs" Datei auf 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 gefunden: 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

Sie haben einen Stil für ProgressRing zu finden und sich die Width und Height gesetzt. Für mich ist der Stil sich in: 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"/> 

... 

Standardmäßig gibt es Width und Height von 60. Soweit ich verstehe, wirkt sich die einfache Einstellung Width und Height direkt nur auf die Ellipsen aus.

EDIT:

Was den Ring noch kleiner machen würde, können Sie mit den Parametern EllipseDiameter und EllipseOffset durch Code herumspielen, weil ein XAML sie (als private) nicht zur Verfügung stehen wird.

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:

der Durchmesser der Ellipse einstellen kann wie folgt durchgeführt werden. Wir tun haben Eigenschaften EllipseDiameter Setter öffentlichen:

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

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

In SetEllipseDiameter sind auf die Größe des Ellipse Überprüfung, ob die Width weniger als 60 eingestellt 6.0 dann.Wir kommentieren.

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

Und in Style setzen Sie den Durchmesser von Ellipse wie folgt aus:

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

Das gleiche gilt für EllipseOffset. Auch er zunächst privaten, und prüfen Sie haben für eine Width kleiner als 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); 
    } 
} 

Schmieden diese Operationen mit diesen Parametern, können Sie die Width und Height von ProgressRing Steuerung konfigurieren können.