Question

I have a custom button control used in my application, and the textwrapping on everyone is set to wrap for translation purposes. When testing, I found that some strings in various languages wrap according to my specifications, although the button height stays the same, and therefore the second line of text is cut off from view. Now I set each button style in xaml from a custom button style in my ResourceDictionary, but I cannot figure out how to adjust the button height accordingly from the ResourceDictionary (in which case I would only have to change the button style once, instead of manually on every single button which I can do). How would I go about updating by custom button style in my resource dictionary so that the height automatically adjusts accordingly to when the text is wrapped? An example of the button implementation is as follows:

MainPage.xaml

<Button x:Name="btnUseEmailAddress" Style="{StaticResource GlassButton}" Click="btnUseEmailAddress_Click" Margin="0,10">
                        <Button.Content>
                            <TextBlock TextWrapping="Wrap" Text="{Binding Path=LocalizedResources.MainPage_Contacts_UseContactsEmailAddress, Source={StaticResource LocalizedStrings}}"/>
                        </Button.Content>
 </Button>

ResourceDictionary.xaml

<Style x:Key="GlassButton" TargetType="Button">
    <Setter Property="FontSize" Value="25.33" />
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
    <Setter Property="Height" Value="60"/>
    <Setter Property="Padding" Value="10,3,10,5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="ButtonBorder" 
              CornerRadius="30" 
              BorderThickness="4,4,4,4" 
              Background="#AA000000"  
              BorderBrush="#99FFFFFF"
              RenderTransformOrigin="0.5,0.5">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="1.7*"/>
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0" CornerRadius="23,23,0,0">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <GradientStop Color="#08FFFFFF" Offset="0"/>
                                    <GradientStop Color="#88FFFFFF" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                        <ContentPresenter x:Name="ButtonContentPresenter"
                            VerticalAlignment="Center"  
                            Grid.RowSpan="2" 
                            HorizontalAlignment="Center"/>
                    </Grid>
                </Border>
                <!--<ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="RenderTransform" TargetName="ButtonBorder">
                            <Setter.Value>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                                </TransformGroup>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>-->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

To note, the Glass button style as of currently looks great and is exactly what I want, except for when the text is wrapped. I can adjust the button height to auto in the MainPage.xaml using <Button x:Name="btnUseEmailAddress" Height="Auto"... but I would have to do this for every single button (which is a lot!). So is there any way to accomplish this in the glass button style?

Answer 1

I would suggest changing the Height property to MinHeight. This will set the height to 60 for most cases, but if the text does need to wrap the height will grow.

Change:

<Setter Property="Height" Value="60"/>

To:

<Setter Property="MinHeight" Value="60"/>