Is issue for ToggleButtonAssist.SwitchTrackOnBackground of ToggleButton?

[guytechNet]

Hi All,

What's color? I think: It is not green or red color inside ToggleButtonAssist.SwitchTrackOnBackground of ToggleButton.

Please, Do you review for me?

[nicolaihenriksen]

@guytechNet If you inspect it with Snoop, you will see that those colors are in fact set as the Fill on the "track" of the toggle. However, the colors are then dimmed down by the style hardcoding Opacity=0.26 (see here)

Whether that is desirable/intentional I cannot really comment on. Perhaps @Keboo could have a look? Internally the template sets the ToggleButtonAssist.SwitchTrachOnBackground (and the "off" variant), so determining if the value is the default or set from outside may be difficult. Perhaps to allow better control, the Opacity for the on/off states could be exposed as an attached property?

[nicolaihenriksen]

@guytechNet For now, until something is added to the library, you have to create a local copy of the Style and apply that style on the element in question. I think that is the easiest way for you to get rid of the hardcoded opacity with the current implementation.

[guytechNet]

Hi @nicolaihenriksen,
I think that is mistake for them (as style opacity on the element in my question)
Please, fix it and upgrade toolkit. Thanks!

[guytechNet]

Hi @nicolaihenriksen,
Can you help me create a local copy of the Style and apply that style on the element in my question?

[nicolaihenriksen]

@guytechNet Sure I can help out.

One option is to simply copy all of the contents of this style into your own style like this:

<Style x:Key="MyCustomMaterialDesignSwitchToggleButton" TargetType="{x:Type ToggleButton}">
  ... paste the contents of the style linked above in here and modify the Opacity on the element named 'Track' to "1"...
</Style>

and then simply apply your style to your toggle button:

<ToggleButton Style="{StaticResource MyCustomMaterialDesignSwitchToggleButton}">
 ...
</ToggleButton>

This will work, but it also means you opt-out of using the actual style that ships with MDIX.

Another approach could be to attempt to leverage the style that ships with MDIX (and any updates it may receive), but add custom functionality on top; in particularly functionality which removes the opacity set on the track. The approach below uses an attached property which, when set, hooks up to the Loaded event of the ToggleButton and set the opacity on the child element named "Track". This works, but it also makes an assumption about the internal naming of children within the style; so not a perfect solution. In reality, should probably also be added as an attached behavior rather than an attached property. Anyway, it gets the job done.

You can pick which one you like better.

You apply the attached property in this manner:

<ToggleButton
    Style="{StaticResource MaterialDesignSwitchToggleButton}"
    local:ToggleButtonAssistExt.RemoveTrackOpacity="True">
  <materialDesign:ToggleButtonAssist.SwitchTrackOnBackground>
    <SolidColorBrush Color="Green" />
  </materialDesign:ToggleButtonAssist.SwitchTrackOnBackground>

  <materialDesign:ToggleButtonAssist.SwitchTrackOffBackground>
    <SolidColorBrush Color="Red" />
  </materialDesign:ToggleButtonAssist.SwitchTrackOffBackground>
</ToggleButton>

The result will look like this:

The ToggleButtonAssistExt.cs looks like this. Note that it does not explicitly handle the case where the attached property is first set and then unset at a later point. I don't think this is a common use case, but worth mentioning that it could be improved upon if needed.

public static class ToggleButtonAssistExt
{
    public static readonly DependencyProperty RemoveTrackOpacityProperty = DependencyProperty.RegisterAttached(
        "RemoveTrackOpacity", typeof(bool), typeof(ToggleButtonAssistExt), new PropertyMetadata(default(bool), RemoveTrackOpacityChanged));

    private static void RemoveTrackOpacityChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is ToggleButton toggleButton)
        {
            if (Equals(true, e.NewValue))
            {
                SetupRemoveTrackOpacity();
            }
        }

        void SetupRemoveTrackOpacity()
        {
            toggleButton.Loaded -= ToggleButtonOnLoaded;    // Avoid multiple event subscriptions
            toggleButton.Loaded += ToggleButtonOnLoaded;
        }

        void ToggleButtonOnLoaded(object sender, RoutedEventArgs e)
        {
            if (toggleButton.FindChild<Rectangle>("Track") is { } track)
            {
                track.Opacity = GetRemoveTrackOpacity(toggleButton) ? 1 : 0.26;
            }
        }
   }

    public static void SetRemoveTrackOpacity(ToggleButton element, bool value)
        => element.SetValue(RemoveTrackOpacityProperty, value);

    public static bool GetRemoveTrackOpacity(ToggleButton element)
        => (bool) element.GetValue(RemoveTrackOpacityProperty);


    /// <summary>
    /// NOTE: Direct copy paste from TreeHelper.cs of the MDIX library
    /// 
    /// Finds a Child of a given item in the visual tree. 
    /// </summary>
    /// <param name="parent">A direct parent of the queried item.</param>
    /// <typeparam name="T">The type of the queried item.</typeparam>
    /// <param name="childName">x:Name or Name of child. </param>
    /// <returns>The first parent item that matches the submitted type parameter. 
    /// If not matching item can be found, 
    /// a null parent is being returned.</returns>
    public static T? FindChild<T>(this DependencyObject parent, string childName)
        where T : DependencyObject
    {
        // Confirm parent and childName are valid. 
        if (parent == null) return null;

        T? foundChild = null;

        int childrenCount = VisualTreeHelper.GetChildrenCount(parent);
        for (int i = 0; i < childrenCount; i++)
        {
            var child = VisualTreeHelper.GetChild(parent, i);
            // If the child is not of the request child type child
            if (child is not T)
            {
                // recursively drill down the tree
                foundChild = FindChild<T>(child, childName);

                // If the child is found, break so we do not overwrite the found child. 
                if (foundChild != null) break;
            }
            else if (!string.IsNullOrEmpty(childName))
            {
                // If the child's name is set for search
                if (child is FrameworkElement frameworkElement && frameworkElement.Name == childName)
                {
                    // if the child's name is of the request name
                    foundChild = (T)child;
                    break;
                }
            }
            else
            {
                // child element found.
                foundChild = (T)child;
                break;
            }
        }
        return foundChild;
    }
}

[guytechNet]

Thanks @nicolaihenriksen very much.
I have chosen the ToggleButtonAssistExt.cs class for my issue, and it worked successfully

[guytechNet]

Hi @Keboo, @nicolaihenriksen
I want to use red background and green background for ToggleButtonAssist.SwitchTrachOnBackground.
How do I do? Do you upgrade for them? Thanks!!!