How to create small buttons with the Esri_Button style

[KarenMeinstein]

When creating WPF buttons with the Esri_Button style (i.e., Style="{DynamicResource Esri_Button}), the narrowest width allowed seems to be ~70.  In Visual Studio you can use smaller widths and the buttons show up as the correct size, but when you actually run the solution, the buttons always expand to around 70 wide.  Does anyone know a work around for this?  I have some small buttons that I would like to have match the Pro style, especially in the dark theme where the style differences seem to show up more.

[CharlesMacleod · Accepted solution]

Karen, looks like there is a MinWidth set by the style so u have to override that. Here's an example:

<UserControl x:Class="....>
  <UserControl.Resources>
    ...
  </UserControl.Resources>
  <Grid>
    ...
    <WrapPanel Orientation="Horizontal" VerticalAlignment="Bottom">
      <Button Content="30" Width="30" MinWidth="30" Style="{DynamicResource Esri_Button}" Margin="2" VerticalAlignment="Center"/>
      <Button Content="40" Width="40" MinWidth="40" Style="{DynamicResource Esri_Button}" Margin="2" VerticalAlignment="Center"/>
      <Button Content="50" Width="50" MinWidth="50" Style="{DynamicResource Esri_Button}" Margin="2" VerticalAlignment="Center"/>
      <Button Content="60" Width="60" MinWidth="60" Style="{DynamicResource Esri_Button}" Margin="2" VerticalAlignment="Center"/>
      <Button Content="70" Width="70" Style="{DynamicResource Esri_Button}" Margin="2" VerticalAlignment="Center"/>
      <Button Content="80" Width="80" Style="{DynamicResource Esri_Button}" Margin="2"
              VerticalAlignment="Center"/>
      <Button Content="90" Width="90" Style="{DynamicResource Esri_Button}" Margin="2" VerticalAlignment="Center"/>
      <Button Content="100" Width="100" Style="{DynamicResource Esri_Button}" Margin="2" VerticalAlignment="Center"/>
    </WrapPanel>
  </Grid>
</UserControl>

[KarenMeinstein · Accepted solution]

Thanks so much!  Your post plus Wolf's additional info solved this for me!

[Wolf · Accepted solution]

I agree with Charlie, it appears that the Esri_Button style sets the MinWidth to 70.  So out-of-box the following XAML results in this UI representation:

XAML: 

<Button Grid.Column="1" HorizontalAlignment="Left" 
        Style="{DynamicResource Esri_Button}" Command="{Binding OpenProjectCmd}" >
  <Image Source="Images\ArcGISProjectOpen16.png" Width="16" Height="16" />
</Button>

 If you set the following Button tag attributes: 'MinWidth', 'MinHeight' and 'Padding' the Button's inner elements will determine the width/height:

<Button Grid.Column="1" HorizontalAlignment="Left" MinWidth="0" MinHeight="0" Padding="0"
        Style="{DynamicResource Esri_Button}" Command="{Binding OpenProjectCmd}" >
  <Image Source="Images\ArcGISProjectOpen16.png" Width="16" Height="16" />
</Button>

So now the UI looks like this:

The reason why the Visual Studio XAML designer is not really WYSIWYG is because the XAML designer is not able to locate various Pro assemblies during design time, hence any ArcGIS Pro styles look different in the XAML designer versus when Pro is running.

[KarenMeinstein]

Thanks so much!  That's very helpful!