How may I add text and rotated font icon together on a button in WPF ?

Question

0.00/5 (No votes)

See more:

Hi people
I have a text which is "Login" and a font icon.
So I want to rotate the font icon 90 degree, but not the text.
I tried below code, but no luck.
Any kindly idea please?

What I have tried:

XML

<Button x:Name="btnOpenSRT"
        Foreground="White"
        Background="Red">

    <Button.Content>
        <TextBlock>
            <Run FontFamily="#Gilroy" FontSize="19">☞</Run>
            <Run FontFamily="#Arial" FontSize="17">Login</Run>
            <TextBlock.RenderTransform>
                <RotateTransform Angle="90"/>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Button.Content>

    <Button.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="8"/>
        </Style>
    </Button.Resources>

</Button>

Posted 27-Nov-23 1:26am

Sh.H.

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2023-11-27T01:39:00

Solution 1

Could you not do something like:

C#

<Button.Content>
  <StackPanel Orientation="Horizontal">
    <TextBlock FontFamily="#Gilroy" FontSize="19" Text="☞">
      <TextBlock.RenderTransform>
        <RotateTransform Angle="90"/>
      </TextBlock.RenderTransform>
    </TextBlock>
    <TextBlock FontFamily="#Arial" FontSize="17" Text="Login"/>
  </StackPanel>
<Button.Content>

It's been a while since I've used WPF but that would be how I would have accomplished it perhaps?

Posted 27-Nov-23 1:39am

Chris Copeland

Comments

Sh.H. 27-Nov-23 8:40am

Good answer. But follow your code, when it rotates the character, the anchor point is not at the middle. So the icon goes off the button!

Maciej Los 27-Nov-23 11:58am

Are you sure? I have tested above code. Works perfect.

[no name] 27-Nov-23 13:34pm

RenderTransformOrigin defaults to 0,0.

https://learn.microsoft.com/en-us/dotnet/api/system.windows.uielement.rendertransformorigin?view=windowsdesktop-7.0

Chris Copeland 28-Nov-23 6:06am

Good point, setting the origin to 0.5,0.5 should make the text transform from the center.

Sh.H. 3-Dec-23 0:01am

Thanks Chris
Worked!
I write a clean code below. So anyone can use it.

Sh.H. · Accepted Answer · 2023-12-02T18:03:00

Solution 2

This is final solution. Thanks Chris Copeland.

XML

<Button.Content>
  <StackPanel Orientation="Horizontal">
    <TextBlock FontFamily="#Gilroy" FontSize="19" Text="☞" RenderTransformOrigin="0.5,0.5">
      <TextBlock.RenderTransform>
        <RotateTransform Angle="-90"/>
      </TextBlock.RenderTransform>
    </TextBlock>
    <TextBlock FontFamily="#Arial" FontSize="17" Text="Login"/>
  </StackPanel>
<Button.Content>

Posted 2-Dec-23 18:03pm

Sh.H.

Updated 2-Dec-23 22:15pm

Comments

Maciej Los 3-Dec-23 11:44am

Publishing other people's posts as your own is not welcome. That's the reason your "answer" has been downvoted.

Sh.H. 4-Dec-23 10:14am

No! I didn't mean like that. I just wanted to write a final solution.
Ok, dear Chris, would please kindly you write the final solution?
I will remove mine then.
Thanks

Maciej Los 5-Dec-23 2:39am

:) I'm not Chris. My name is Maciej. And i only wanted to tell you why your answer has been downvoted. A "final solution" is exactly as yours, but it follows from Chris's answer.

Sh.H. 6-Dec-23 0:35am

Thank you Maciej.

Maciej Los 6-Dec-23 2:53am

You're welcome. :)

How may I add text and rotated font icon together on a button in WPF ?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

How may I add text and rotated font icon together on a button in WPF ?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us