locked
Hub.Header margin/border hides right aligned text

    Question

  • Hi,

    I want to have some text aligned all the way to the right in the Hub.Header. But then there is a right margin/border that hides part of the text on the right side.

    How do I get rid of that margin/border or how do I get the text to be all the way to the right?

    This is what I have:

    <Hub Name="MyHub">
        <Hub.Header>
            <TextBlock Text="Something" TextAlignment="Right" Width="{Binding ActualWidth, ElementName=MyHub}"></TextBlock>
        </Hub.Header>
        <HubSection>
            <DataTemplate>
                <TextBlock Text="Some content here"></TextBlock>
            </DataTemplate>
        </HubSection>
    </Hub>

    Wednesday, February 25, 2015 4:06 PM

Answers

  • Hi Aratys,

    Basically I would not suggest you to modify the control Margin which will cause the layout incorrect if you further change the padding from 40 (40*2=80) to another number, statically setting margin will not work.

    Try following code, set HorizontalAlignment="Right"  for TextBlock is enough without using Margin.

                    <Grid>
                        <TextBlock HorizontalAlignment="Right" Text="Something" TextAlignment="Right"  Width="{Binding ActualWidth, ElementName=MyHub}" ></TextBlock>
                    </Grid>

    But note binding to the Hub control actual width directly is not a suggested, if your text is long enough you will see there would have some cutting effect on left side. To prevent this we may need binding the width to a converter which formula is hub.actualWidth - hub.Padding.Left - hub.Padding.Right.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Sunday, March 01, 2015 4:34 AM
    Moderator

All replies

  • Hi Aratys,

    I have tested your code in my side and I can get the same result as you:

    In the above image the red one is the hub, we can see that there are some horizontal space betwwen the Hub and the TextBlock, so it will hide some text of the textblock when the TextAlignment is right. One of the quick solution is to modify the margin value for the TextBlock in the Hub.Header as following, after that the text will be all the way to right.

    <Hub.Header>
       <TextBlock Text="Something" TextAlignment="Right"  Width="{Binding ActualWidth, ElementName=MyHub}" 
    Margin="-80,0,0,0"></TextBlock> </Hub.Header>
    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, February 26, 2015 6:20 AM
    Moderator
  • Hi Amy,

    Do you know if there is a way to remove the horizontal space on the right side?

    Thursday, February 26, 2015 8:24 AM
  • A workaround is to place the header outside the hub control. This works for my scenario.
    But it would have been nice to do it inside the hub control also.
    Thursday, February 26, 2015 9:15 AM
  • Hi Aratys,

    Basically I would not suggest you to modify the control Margin which will cause the layout incorrect if you further change the padding from 40 (40*2=80) to another number, statically setting margin will not work.

    Try following code, set HorizontalAlignment="Right"  for TextBlock is enough without using Margin.

                    <Grid>
                        <TextBlock HorizontalAlignment="Right" Text="Something" TextAlignment="Right"  Width="{Binding ActualWidth, ElementName=MyHub}" ></TextBlock>
                    </Grid>

    But note binding to the Hub control actual width directly is not a suggested, if your text is long enough you will see there would have some cutting effect on left side. To prevent this we may need binding the width to a converter which formula is hub.actualWidth - hub.Padding.Left - hub.Padding.Right.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Sunday, March 01, 2015 4:34 AM
    Moderator