none
Dynamic Width Text Button RRS feed

  • Question

  • Hi,

    Can someone advise if it's possible to implement a button with a dynamic width that matches the text content?

    At the moment I have:

    <Button x:Name="btnLabelSupport" Click="btnSupport_Click" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="459,80,310,0" Width="61" Height="20" RenderTransformOrigin="0.075,0.55">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Opacity" Value="0.7"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" Value="1"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Margin="0,0,-80,0">
                            <Rectangle Fill="Transparent"/>
                            <TextBlock HorizontalAlignment="Left"
            					TextWrapping="Wrap"
            					Text="SUPPORT"
            					VerticalAlignment="Top"
            					Foreground="White" RenderTransformOrigin="1.118,0.688" Width="60" Height="20"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>

    This is fine, but if I implement different languages later the width will be an issue.

    Thanks

    Monday, February 23, 2015 6:54 PM

Answers

  • By default a button will grow if you let it.

    So will a textblock you have text in.

    A textblock with text in demands space from it's parent.

    If it is in a button that'd be off the button...

    And so on up the visual tree.

    That's how wpf works.

    Pretty much remove the sizing and that'll work:

                           <TextBlock HorizontalAlignment="Left"
           					TextWrapping="Wrap"
           					Text="SUPPORT"
       					VerticalAlignment="Top"
     Foreground="White" RenderTransformOrigin="1.118,0.688"
    >

    I don't know what that rendertransforOrigin is about.

    .

    When you do localisation, different languages can have dramatically different sized strings for the same phrase.

    With smaller windows you often want to size them to content and give containers padding, controls margins and no absolute size on anything.


    I used to be a points hound.
    But I'm alright nooooooooooooooooooooooooooooOOOOOWWWW !


    Monday, February 23, 2015 7:23 PM
    Moderator
  • >>This is fine, but if I implement different languages later the width will be an issue.

    Why would the width be an issue? You could just increase the Width of the Text Block in the ControlTemplate. Or what you really should do is to remove the explicit width and height of the TextBlock and bind these properties of the Grid to the Button control's Width and Height using TemplateBinding:

    <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Margin="0,0,-80,0" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                            <Rectangle Fill="Transparent"/>
                            <TextBlock HorizontalAlignment="Left"
                 TextWrapping="Wrap"
                 Text="SUPPORT"
                 VerticalAlignment="Top"
                 Foreground="White" RenderTransformOrigin="1.118,0.688"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>


    Then the Width and Height that you set on the button (61 and 20 in your example) defines the size of it. If you don't set these properties explicitly the Button will fill the remaining space of its parent container if you set its HorizontalAlignment to Stretch:

    <Button x:Name="btnLabelSupport" Click="btnSupport_Click" HorizontalAlignment="Strecth" > 
    ...

    Specifying a fixed size within the ControlTemplate is not a good idea here.

    Hope that helps.

    Please remember to mark helpful posts as answer to close your threads and please start a new thread if you have a new question.

    • Marked as answer by BudBrain Wednesday, February 25, 2015 4:52 PM
    Monday, February 23, 2015 9:29 PM

All replies

  • By default a button will grow if you let it.

    So will a textblock you have text in.

    A textblock with text in demands space from it's parent.

    If it is in a button that'd be off the button...

    And so on up the visual tree.

    That's how wpf works.

    Pretty much remove the sizing and that'll work:

                           <TextBlock HorizontalAlignment="Left"
           					TextWrapping="Wrap"
           					Text="SUPPORT"
       					VerticalAlignment="Top"
     Foreground="White" RenderTransformOrigin="1.118,0.688"
    >

    I don't know what that rendertransforOrigin is about.

    .

    When you do localisation, different languages can have dramatically different sized strings for the same phrase.

    With smaller windows you often want to size them to content and give containers padding, controls margins and no absolute size on anything.


    I used to be a points hound.
    But I'm alright nooooooooooooooooooooooooooooOOOOOWWWW !


    Monday, February 23, 2015 7:23 PM
    Moderator
  • >>This is fine, but if I implement different languages later the width will be an issue.

    Why would the width be an issue? You could just increase the Width of the Text Block in the ControlTemplate. Or what you really should do is to remove the explicit width and height of the TextBlock and bind these properties of the Grid to the Button control's Width and Height using TemplateBinding:

    <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Margin="0,0,-80,0" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                            <Rectangle Fill="Transparent"/>
                            <TextBlock HorizontalAlignment="Left"
                 TextWrapping="Wrap"
                 Text="SUPPORT"
                 VerticalAlignment="Top"
                 Foreground="White" RenderTransformOrigin="1.118,0.688"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>


    Then the Width and Height that you set on the button (61 and 20 in your example) defines the size of it. If you don't set these properties explicitly the Button will fill the remaining space of its parent container if you set its HorizontalAlignment to Stretch:

    <Button x:Name="btnLabelSupport" Click="btnSupport_Click" HorizontalAlignment="Strecth" > 
    ...

    Specifying a fixed size within the ControlTemplate is not a good idea here.

    Hope that helps.

    Please remember to mark helpful posts as answer to close your threads and please start a new thread if you have a new question.

    • Marked as answer by BudBrain Wednesday, February 25, 2015 4:52 PM
    Monday, February 23, 2015 9:29 PM