How to make revealPasswordButton larger?

[mkj-stonehill]

I accidentally tripped across the "revealPasswordButton" class for TexBox, and at just the right time--I had to add that feature to several password text boxes. And, it works great! One thing I have not been able to figure out, though, is how I can make the buttons larger. The text boxes we use have fairly large text (24 or 28 points), so I'd like to make the buttons larger as well.

What is the magic incantation I can use to override the size in the Fluent styles here:

Avalonia/src/Avalonia.Themes.Fluent/Controls/TextBox.xaml

Lines 236 to 246 in 7278dce

	<ToggleButton Theme="{StaticResource FluentTextBoxToggleButton}"
	IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}">
	<Panel>
	<PathIcon Data="{StaticResource PasswordBoxRevealButtonData}"
	Height="8" Width="12"
	IsVisible="{Binding $parent[ToggleButton].!IsChecked}"/>
	<PathIcon Data="{StaticResource PasswordBoxHideButtonData}"
	Height="12" Width="12"
	IsVisible="{Binding $parent[ToggleButton].IsChecked}"/>
	</Panel>
	</ToggleButton>

[stevemonaco]

The PathIcons have their sizes set locally, so it's much easier to replace the entire style. ie.

<Window.Styles>
  <Style Selector="TextBox.revealPasswordButton[AcceptsReturn=False][IsReadOnly=False]:not(TextBox:empty)">
    <Setter Property="InnerRightContent">
      <Template>
        <ToggleButton Theme="{StaticResource FluentTextBoxToggleButton}"
                      IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}">
          <Panel>
            <PathIcon Data="{StaticResource PasswordBoxRevealButtonData}"
                      Height="36" Width="36"
                      IsVisible="{Binding $parent[ToggleButton].!IsChecked}"/>
            <PathIcon Data="{StaticResource PasswordBoxHideButtonData}"
                      Height="36" Width="36"
                      IsVisible="{Binding $parent[ToggleButton].IsChecked}"/>
          </Panel>
        </ToggleButton>
      </Template>
    </Setter>
  </Style>
</Window.Styles>

<Grid>
  <TextBox
      x:Name="box"
      Grid.Row="1"
      Classes="revealPasswordButton"
      PasswordChar="*"
      Text="Reveal Password" />
</Grid>

If a fixed size doesn't work for you, then consider wrapping that part (using the style above) in a Viewbox like:

          <ToggleButton Theme="{StaticResource FluentTextBoxToggleButton}"
                        IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}">
            <Viewbox>
              <Grid>
                <PathIcon Data="{StaticResource PasswordBoxRevealButtonData}"
          Height="36" Width="36"
          IsVisible="{Binding $parent[ToggleButton].!IsChecked}"/>
                <PathIcon Data="{StaticResource PasswordBoxHideButtonData}"
                          Height="36" Width="36"
                          IsVisible="{Binding $parent[ToggleButton].IsChecked}"/>
              </Grid>

            </Viewbox>
          </ToggleButton>

[mkj-stonehill]

Thank you so much for this answer. I went with your Viewbox suggestion (to future-proof this code I'm modifying, since sales and marketing keeps changing their minds on every little look and feel issue). Here's what I ended up adding to my Styles.axaml file:

  <Style Selector="TextBox.revealPasswordButton[AcceptsReturn=False][IsReadOnly=False]:not(TextBox:empty)">
    <Setter Property="InnerRightContent">
      <Template>
        <ToggleButton Theme="{StaticResource FluentTextBoxToggleButton}"
                      IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}"
                      ClipToBounds="True">
          <Viewbox>
            <Grid>
              <PathIcon Data="{StaticResource PasswordBoxRevealButtonData}"
                        IsVisible="{Binding !$parent[ToggleButton].IsChecked}"/>
              <PathIcon Data="{StaticResource PasswordBoxHideButtonData}"
                        IsVisible="{Binding $parent[ToggleButton].IsChecked}"/>
            </Grid>
          </Viewbox>
        </ToggleButton>
      </Template>
    </Setter>
  </Style>

[mkj-stonehill]

Here's what TextBox fields look like with the above style. The FontSize runs from 32 (at the top) to 8 (at the bottom), decreasing by 2 each time:

[stevemonaco]

There are some small opportunities to simplify more. Viewbox isn't actually needed as PathIcon contains one. Can also use Panel since it's lighter than Grid. You do need to override the default styled sizes for PathIcon provided by FluentTheme though.

<ToggleButton IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}" Theme="{StaticResource FluentTextBoxToggleButton}">
  <Panel>
    <PathIcon
      Width="NaN"
      Height="NaN"
      Data="{StaticResource PasswordBoxRevealButtonData}"
      IsVisible="{Binding !$parent[ToggleButton].IsChecked}" />
    <PathIcon
      Width="NaN"
      Height="NaN"
      Data="{StaticResource PasswordBoxHideButtonData}"
      IsVisible="{Binding $parent[ToggleButton].IsChecked}" />
  </Panel>
</ToggleButton>

[stevemonaco]

Those sizes should probably be defined as resources so they can be overridden, but there's not really any written guidance as to what should qualify.