Question

I’ve got a button (NOT created by xaml) for which I’m setting the content alignment like this:

btn.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Left;

but if the content is too long then the text is sliding to the right after a point in which you can’t see the text anymore.
the buttons are created inside panorama item 2 in this grid:

<Grid x:Name="LayoutRoot">
    <controls:Panorama Title="Title" SelectionChanged="Panorama_SelectionChanged" FontSize="20">

        <!--Panorama item one-->
        <controls:PanoramaItem Header="Wall" Margin="40,0,0,0" Name="PIWall">

        </controls:PanoramaItem>

        <!--Panorama item two-->
        <controls:PanoramaItem Header="Messages" Margin="30,0,0,0" Name="PIMail">

        </controls:PanoramaItem>

    </controls:Panorama>
</Grid>

The button and it’s settings are as follows:

HyperlinkButton btn = new HyperlinkButton();
        btn.Height = 89;
        btn.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
        btn.VerticalAlignment = System.Windows.VerticalAlignment.Top;
        btn.Margin = new Thickness(60, -70, 0, 0);
        btn.Width = 290;
        btn.Content = message;
        btn.FontSize = 22;
        btn.Visibility = System.Windows.Visibility.Visible;
        btn.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Left;
        panel.Children.Add(btn);
        scrollViewer.Content = panel;
        PIMail.Content = mailscrollViewer;

How can i make the text not slide over the grid margins?

Answer 1

OK, to wrap text inside a button, you could use XAML like this:

<Button Width="200" Height="200">
    <Button.Content>
        <TextBlock TextWrapping="Wrap" Text="This is a long text that fits into button"/>
    </Button.Content>
</Button>

In order to accomplish this in code, you could do the following:

Button btn = new Button();
btn.Height = 200;
btn.Width = 300;
TextBlock txt = new TextBlock();
txt.TextWrapping = TextWrapping.Wrap;
txt.Text = "A huge amount of text that will fill the button";
btn.Content = txt;
ContentPanel.Children.Add(btn);

ContentPanel is a simple grid.

EDIT: Modified post for HyperlinkButton

In order to enable text wrapping in hyperlink button you need to edit the style of the hyperlink button. Define it like this in the App.xaml file:

    <Style x:Key="HyperlinkButtonStyle" TargetType="HyperlinkButton">
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="HyperlinkButton">
                    <Border Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TextElement"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="TextElement">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border Background="{TemplateBinding Background}" Margin="{StaticResource PhoneHorizontalMargin}" Padding="{TemplateBinding Padding}">
                            <TextBlock x:Name="TextElement" TextWrapping="Wrap" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Content}" TextDecorations="Underline" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The important change is that the TextBlock now contains the TextWrapping property set to “Wrap”.

Then use the button like you normally do, just don’t forget to set the styling:

var btn = new HyperlinkButton();
btn.Height = 200;
btn.Width = 300;
btn.NavigateUri = new Uri("http://bing.com", UriKind.Absolute);
btn.TargetName = "_blank";
btn.Style = Application.Current.Resources["HyperlinkButtonStyle"] as Style;
btn.Content = "This is a huge amount of text that will be in the hyperlink button";
ContentPanel.Children.Add(btn);