How to rotate a Span in WPF-CodePudding

I have two buttons, each has text and the unicode "Squat Black Rightward Arrow", aka ➧. One one button, the arrow points right, on the other, I want it to point left. (If there was a unicode "Squat Black Leftward Arrow," my problem would be solved).

My buttons are constructed something like this:

<Button>
  <Span>Go Right</Span>
  <Span FontSize="24">➧</Span>
</Button>
<Button>
  <Span>Go Left</Span>
  <Span FontSize="24">➧</Span>
</Button>

I've wrapped the two in Spans because I need to increase the arrow's font size.

What I'd like to do is to rotate that second arrow 180degrees so that it faces left. I've looked at rotating Button.Content, but that rotates everything in the button. I've looked at rotating TextBlocks, but those didn't play well inside the button.

CodePudding user response：

span seems to only be used in documents,here i used label

  <Button>
            <Button.Content>
                <StackPanel>
                    <Label>Go Left</Label>
                    <Label FontSize="24" HorizontalAlignment="Center" Content="➧" RenderTransformOrigin="0.5,0.5">
                        <Label.RenderTransform>
                            <TransformGroup>
                                <RotateTransform Angle="-180"/>
                            </TransformGroup>
                        </Label.RenderTransform>
                    </Label>
                </StackPanel>
            </Button.Content>
        </Button>

CodePudding user response：

You could simply use a font that provides appropriate arrow symbols, like Segoe MDL2 Assets or Segoe Fluent Icons.

<Button>
    <Span BaselineAlignment="Center">
        <Run>Go Left</Run>
        <Run FontFamily="Segoe MDL2 Assets">&#xEDD9;</Run>
    </Span>
</Button>
<Button>
    <Span BaselineAlignment="Center">
        <Run>Go Right</Run>
        <Run FontFamily="Segoe MDL2 Assets">&#xEDDA;</Run>
    </Span>
</Button>