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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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. :)