Search code examples
wpfflipuielementlayouttransform

Flip a UIElement but preserve text inside from flipping

I think the title is pretty straightforward. I'm using some custom controls. I want to flip the tab header of a custom tab control. I tried a layout transform (ScaleTransform X = -1) to flip horizontally the tab header. But obviously I want the text inside not to be mirrored. I can't find a way so far.

Solution

  • You can do this by giving the TabItem a HeaderTemplate, and applying a ScaleTransform there also:

    <TabControl>
  <TabItem Header="Hello, World!">
    <TabItem.LayoutTransform>
      <ScaleTransform ScaleX="-1" />
    </TabItem.LayoutTransform>
    <TabItem.HeaderTemplate>
      <DataTemplate>
        <ContentPresenter Content="{Binding}">
          <ContentPresenter.LayoutTransform>
            <ScaleTransform ScaleX="-1" />
          </ContentPresenter.LayoutTransform>
        </ContentPresenter>
      </DataTemplate>
    </TabItem.HeaderTemplate>
  </TabItem>
</TabControl>