Strange behavior MetroAnimatedSingleRowTabControl

Question

I found a strange behavior with MetroAnimatedSingleRowTabControl. Rendering looks different (more pixalated) than using a "normal" TabControl.

Just try

<controls:MetroWindow  x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
    xmlns:wpfApplication1="clr-namespace:WpfApplication1"
    xmlns:system="clr-namespace:System;assembly=mscorlib"

    Title="MainWindow" >

<StackPanel>
    <controls:MetroAnimatedSingleRowTabControl>

        <controls:MetroAnimatedSingleRowTabControl.Items>
            <system:String>My string</system:String>
            <system:String>My string2</system:String>
            <system:String>My string3</system:String>
        </controls:MetroAnimatedSingleRowTabControl.Items>
        <controls:MetroAnimatedSingleRowTabControl.ItemContainerStyle>
            <Style TargetType="TabItem">
                <Setter Property="Header" Value="{Binding}" />
            </Style>
        </controls:MetroAnimatedSingleRowTabControl.ItemContainerStyle>

        <TabControl.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding}" FontSize="10"></TextBlock>
                    <TextBlock Text="{Binding}" FontSize="20"></TextBlock>
                    <TextBlock Text="{Binding}" FontSize="30"></TextBlock>
                    <TextBlock Text="{Binding}" FontSize="40"></TextBlock>
                </StackPanel>

            </DataTemplate>
        </TabControl.ContentTemplate>

    </controls:MetroAnimatedSingleRowTabControl>

    <TabControl>

        <TabControl.Items>
            <system:String>My string</system:String>
            <system:String>My string2</system:String>
            <system:String>My string3</system:String>
        </TabControl.Items>
        <TabControl.ItemContainerStyle>
            <Style TargetType="TabItem">
                <Setter Property="Header" Value="{Binding}" />
            </Style>
        </TabControl.ItemContainerStyle>

        <TabControl.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding}" FontSize="10"></TextBlock>
                    <TextBlock Text="{Binding}" FontSize="20"></TextBlock>
                    <TextBlock Text="{Binding}" FontSize="30"></TextBlock>
                    <TextBlock Text="{Binding}" FontSize="40"></TextBlock>
                </StackPanel>

            </DataTemplate>
        </TabControl.ContentTemplate>

    </TabControl>


</StackPanel>

Has anybody an idea how to fix this?

Thanks in advance

Answer 1

The problem of this are the settings of RenderOptions.ClearTypeHint and TextOptions.TextFormattingMode on the inner TransitioningContentControl.

As a workaround you can override this where you need it.

<StackPanel>
    <StackPanel.Resources>
        <Style BasedOn="{StaticResource {x:Type Controls:TransitioningContentControl}}" TargetType="{x:Type Controls:TransitioningContentControl}">
            <Setter Property="RenderOptions.ClearTypeHint" Value="Auto" />
            <Setter Property="TextOptions.TextFormattingMode" Value="Ideal" />
        </Style>
    </StackPanel.Resources>
    <Controls:MetroAnimatedSingleRowTabControl>

        <Controls:MetroAnimatedSingleRowTabControl.Items>
            <system:String>My string</system:String>
            <system:String>My string2</system:String>
            <system:String>My string3</system:String>
        </Controls:MetroAnimatedSingleRowTabControl.Items>

        <TabControl.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock FontSize="10" Text="{Binding}" />
                    <TextBlock FontSize="20" Text="{Binding}" />
                    <TextBlock FontSize="30" Text="{Binding}" />
                    <TextBlock FontSize="40" Text="{Binding}" />
                </StackPanel>
            </DataTemplate>
        </TabControl.ContentTemplate>

    </Controls:MetroAnimatedSingleRowTabControl>

    <TabControl>

        <TabControl.Items>
            <system:String>My string</system:String>
            <system:String>My string2</system:String>
            <system:String>My string3</system:String>
        </TabControl.Items>

        <TabControl.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock FontSize="10" Text="{Binding}" />
                    <TextBlock FontSize="20" Text="{Binding}" />
                    <TextBlock FontSize="30" Text="{Binding}" />
                    <TextBlock FontSize="40" Text="{Binding}" />
                </StackPanel>
            </DataTemplate>
        </TabControl.ContentTemplate>

    </TabControl>
</StackPanel>

Hope this helps!