Patrick95
Patrick95

Reputation: 138

How can I transform a border but not the content inside?

Here is an image of my problem and my code below. I'd like to know how I can get the text to be flipped right side up. Below is also a link where I got the suggestions for setting scale transform Y to 1.

https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/how-to-flip-a-uielement-horizontally-or-vertically

MyImage

<Viewbox>
                <Grid>
                  <ItemsControl ItemsSource="{Binding FaceParts}">
                    <ItemsControl.ItemsPanel>
                      <ItemsPanelTemplate>
                        <Canvas Background="SlateBlue" Height="140" Width="80" />
                      </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemContainerStyle>
                      <Style TargetType="ContentPresenter">
                        <Setter Property="RenderTransform" Value="1 0 0 -1 0 0"/>
                        <Setter Property="Canvas.Left" Value="{Binding X}"/>
                        <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                      </Style>
                    </ItemsControl.ItemContainerStyle>
                    <ItemsControl.ItemTemplate>
                      <DataTemplate>
                        <StackPanel>
                          <Border Width="{Binding Width}" Height="{Binding Height}" Background="{Binding Fill}" BorderBrush="Black" BorderThickness=".20">
                            <Viewbox>
                              <TextBlock Text="{Binding TextOverlay}" RenderTransformOrigin=".5,.5">
                                <TextBlock.RenderTransform>
                                  <ScaleTransform ScaleY="1"/>
                                </TextBlock.RenderTransform>
                              </TextBlock>
                            </Viewbox>
                          </Border>
                        </StackPanel>
                      </DataTemplate>
                    </ItemsControl.ItemTemplate>
                  </ItemsControl>

                  <Viewbox  VerticalAlignment="Bottom"  Height="5" Margin="0,0,0,5">
                    <TextBlock  Background="SlateBlue"  TextAlignment="Center" Text="{Binding SelectedViewerProduct.Width, Converter={StaticResource FractionConverter}}"/>
                  </Viewbox>

                </Grid>
              </Viewbox>

Upvotes: 1

Views: 76

Answers (1)

Patrick95
Patrick95

Reputation: 138

As it turns out, setting ScaleY to a positive has no effect on flipping it right side up, in order to flip it right side up, I had to set the ScaleY to a -1. Essentially flipping it over again the opposite direction to make it right side up.

enter image description here

Upvotes: 1

Related Questions