7

It looks like the MahApps.Metro ProgressRing control defaults to a Minimum size of 60x60.

There is a property for the ProgressRing called "IsLarge", but even when it is set to "False" it seems to have no effect on being able to make to ProgressRing smaller than 60x60.

Obiviously changing the Height and Width properties do not affect this either.

Looking on GitHUb as the actual c# code for the ProgressRing, it looks like there are several properties to affect ellipse diameter, etc, but these properties are private properties, and can not be set from outside calls.

How can I make this smaller? Say 20x20 or 30x30?

In the below code I specify IsLarge=False, and set the size to 30x30, but it still defaults to 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>

Below are snippets of code from the "ProgressRing.cs" file found on 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;
        }
    }
J P
  • 79
  • 1
  • 8

1 Answers1

8

You have to find a style for ProgressRing and set yourself the Width and Height. For me, the style is located at: 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"/>

...

By default, there are Width and Height of 60. As far as I understand, easy set Width and Height directly affects only the ellipses.

EDIT:

What would make the ring even smaller, you can play around with the parameters EllipseDiameter and EllipseOffset through code, because a XAML they will not be available (as private).

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:

To set the diameter of the Ellipse can be done as follows. We do have properties EllipseDiameter setter public:

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

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

In SetEllipseDiameter are checking on the size of the Ellipse, if the Width is less than 60 then set 6.0. We comment out.

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

And in Style set the diameter of Ellipse like that:

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

The same goes for EllipseOffset. He, too, at first private, and have check for a Width smaller than 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);
    }
}

Forging these operations with these parameters, you can configure the Width and Height of ProgressRing control.

Anatoliy Nikolaev
  • 22,370
  • 15
  • 69
  • 68
  • Setting the MinHeight and MinWidth seemed to work, but now the limit seems to be 30x30! If I try and go any smaller than that it stays the same, and I am guessing because there has to be some Minimum height/width required due to diameter of circles in ellipse? ;-) – J P Jul 21 '13 at 17:48
  • Additionally, I did try also setting the height and width as well as the minheight and minwidth to 20x20, and it still stayed at 30x30. – J P Jul 21 '13 at 17:58
  • @J P: You need to decrease the width / height of the ellipse? Or set the width / height of less than 30x30? If less, then how much? – Anatoliy Nikolaev Jul 21 '13 at 19:13
  • I would like the entire control to appear smaller than 30x30, but changing the minheight and minwidth values dont seem to work below 30. Meaning it wont go any smaller than 30x30. I am assuming that is because the ellipse diameter value also has a min requirement, and it wont display properly if you set the progress ring smaller than 30x30. I tried accessing the EllipseDiameter property through code, as you can see in the edited post above, I get this error: Property or indexer 'MahApps.Metro.Controls.ProgressRing.EllipseDiameter' cannot be assigned to -- it is read only – J P Jul 21 '13 at 21:31
  • @J P: Strangely, it works for me. I tested this: style and control code of `ProgressRing` took and placed in the my project. They are not `read only`. They are *private*, and can only be set inside: `private set { SetValue(EllipseDiameterProperty, value); }`. If you want, I can give you the link to the project. – Anatoliy Nikolaev Jul 22 '13 at 12:34
  • That would be really nice if you can provide link to project! – J P Jul 22 '13 at 18:58
  • @J P: Here's an [example](https://skydrive.live.com/redir?resid=3FC95A33B3F2DE8A!110). See the style, there is set `EllipseDiameter` and `EllipseOffset`. I hope will help. – Anatoliy Nikolaev Jul 22 '13 at 19:24
  • Thank you for the sample, it does look like the ellipse diameter changed, but I still can not get the actual ring to be smaller than 30x30. I changed every setting in every place in the project code you gave me, and no matter what the ring will not go smaller than 30x30. Really what I need is for it to be 15x15 or smaller.. =/ – J P Jul 23 '13 at 06:07
  • @JP DId you try setting `MinHeight` and `MinWidth` to '0'? – maxp Apr 03 '19 at 13:58