Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new options to the ExpanderAssist class #3294

Merged

Conversation

AbderrahmaneAhmam
Copy link
Contributor

  • ExpanderPosition: to set the position of the Expander Icon
image

--> Start: at the start of the header materialDesign:ExpanderAssist.ExpanderPosition="Start"
--> End: at the end of the header materialDesign:ExpanderAssist.ExpanderPosition="End"

  • CollapsedIcon: to set the icon when the expander is collapsed
    --> materialDesign:ExpanderAssist.CollapcedIcon="{materialDesign:PackIcon Kind=Plus}"
image
  • ExpandedIcon: to set the icon when the expander is expanded
    --> materialDesign:ExpanderAssist.ExpandedIcon="{materialDesign:PackIcon Kind=Minus}"
image

- ExpanderPosition: to set the position of the Expander Icon
 --> Start: at the start of the header
 --> End: at the end of the header
- CollapsedIcon: to set the icon when the expander is collapsed
- ExpandedIcon: to set the icon when the expander is expanded
@Keboo Keboo added this to the 5.0.0 milestone Aug 13, 2023
@Keboo Keboo added enhancement release notes Items are likely to be highlighted in the release notes. labels Aug 13, 2023
@Keboo Keboo self-requested a review August 13, 2023 00:01
Copy link
Member

@Keboo Keboo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things.

  1. It appears that it is only implemented for Expand direction Up and Down. This should also support ExpandDirection Left and Right (this is the 3a expanders in the demo app).

  2. Rather than having two attached properties, I think a single one for the ToggleButton's content will work. Perhaps called something like ExpanderButtonContent (or similar). I think naming it so that consumers realize that it accepts arbitrary content, rather than just icons. The caller can then toggle it doing something like this:

<Expander.Style>
  <Style TargetType="Expander" BasedOn="{StaticResource MaterialDesignExpander}">
    <Setter Property="materialDesign:ExpanderAssist.ExpanderButtonContent" Value="{materialDesign:PackIcon Kind=Minus}" />
    <Style.Triggers>
      <Trigger Property="IsExpanded" Value="True">
        <Setter Property="materialDesign:ExpanderAssist.ExpanderButtonContent" Value="{materialDesign:PackIcon Kind=Plus}" />
      </Trigger>
    </Style.Triggers>
  </Style>
</Expander.Style>

@AbderrahmaneAhmam
Copy link
Contributor Author

Hello @Keboo

  • The ExpandDirection property is solely utilized to determine the opening direction of an expander control. On the other hand, the ExpanderPosition property is employed to adjust the position of the expander button either at the beginning or the end. This distinction is particularly valuable since certain UI/UX designs call for the expander button to be positioned at the start. This could pose challenges in development, as it would necessitate creating the template anew.

  • Regarding the "ExpanderButtonContent," you are correct. We can make it like this; it's easier.

@AbderrahmaneAhmam
Copy link
Contributor Author

Hello @Keboo ,

I've made some changes following your review. I combined the two properties, "Collapse" and "Expand" icons, into a single property called ExpanderButtonContent. Additionally, I renamed the "ExpanderPosition" property to ExpanderButtonPosition.

I have a question: is it possible to utilize these properties in the TreeView as well? This would allow for altering the expander button's content and position using the same assistant.

@Keboo
Copy link
Member

Keboo commented Aug 16, 2023

  • The ExpandDirection property is solely utilized to determine the opening direction of an expander control. On the other hand, the ExpanderPosition property is employed to adjust the position of the expander button either at the beginning or the end. This distinction is particularly valuable since certain UI/UX designs call for the expander button to be positioned at the start. This could pose challenges in development, as it would necessitate creating the template anew.

This is true, but we also use it in the Expander style to swap to a different header template. I would expect that we need to add similar triggers for changing the expanding icon in the vertical template as well.

@Keboo
Copy link
Member

Keboo commented Aug 16, 2023

Hello @Keboo ,

I've made some changes following your review. I combined the two properties, "Collapse" and "Expand" icons, into a single property called ExpanderButtonContent. Additionally, I renamed the "ExpanderPosition" property to ExpanderButtonPosition.

I have a question: is it possible to utilize these properties in the TreeView as well? This would allow for altering the expander button's content and position using the same assistant.

I think we could do something similar for tree view, but I would make it a new property on the TreeViewAssist class rather than re-using this one.

Added new default button position to support different default for vertical and horizontal.
@Keboo Keboo enabled auto-merge (squash) August 17, 2023 06:29
@Keboo Keboo merged commit 1cd75db into MaterialDesignInXAML:master Aug 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement release notes Items are likely to be highlighted in the release notes.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants