Blurred Controls

[fpuglap]

I'm using a MaterialDesignCardFlipper but for any reason the content is blurred. This is the common behaviour on these controls or I'm missing something? Thanks in advance.

Code is the same as the Material Design in XAML Toolkit provides:

<materialDesign:Flipper
  Style="{StaticResource MaterialDesignCardFlipper}"
  VerticalAlignment="Top">
  <materialDesign:Flipper.FrontContent>
    <Button
      Style="{StaticResource MaterialDesignFlatButton}"
      Command="{x:Static materialDesign:Flipper.FlipCommand}"
      Margin="8"
      Width="192">
    RESIZING...
  </Button>
  </materialDesign:Flipper.FrontContent>
  <materialDesign:Flipper.BackContent>
    <Grid
      Height="256"
      Width="200">
      <Grid.RowDefinitions>
        <RowDefinition
          Height="Auto" />
        <RowDefinition
          Height="*" />
      </Grid.RowDefinitions>
      <materialDesign:ColorZone
        Mode="Accent"
        Padding="6">
        <StackPanel
          Orientation="Horizontal">
          <Button
            Style="{StaticResource MaterialDesignToolForegroundButton}"
            Command="{x:Static materialDesign:Flipper.FlipCommand}"
            HorizontalAlignment="Left">
            <materialDesign:PackIcon
              Kind="ArrowLeft"
              HorizontalAlignment="Right" />
          </Button>
          <TextBlock
            Margin="8 0 0 0"
            VerticalAlignment="Center">
          EDIT USER
        </TextBlock>
        </StackPanel>
      </materialDesign:ColorZone>
      <Grid
        Grid.Row="1"
        Margin="0 6 0 0"
        HorizontalAlignment="Center"
        VerticalAlignment="Top"
        Width="172">
        <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition />
          <RowDefinition />
          <RowDefinition />
        </Grid.RowDefinitions>
        <TextBox
          materialDesign:HintAssist.Hint="First name"
          materialDesign:HintAssist.IsFloating="True"
          Margin="0 12 0 0">
        James
      </TextBox>
        <TextBox
          Grid.Row="1"
          materialDesign:HintAssist.Hint="Last name"
          materialDesign:HintAssist.IsFloating="True"
          Margin="0 12 0 0">
        Willock
      </TextBox>
        <StackPanel
          Grid.Row="2"
          Orientation="Horizontal"
          Margin="0 12 0 0"
          HorizontalAlignment="Right">
          <TextBlock
            VerticalAlignment="Center">
          Email Contact
        </TextBlock>
          <ToggleButton
            Margin="8 0 0 0"></ToggleButton>
        </StackPanel>
        <StackPanel
          Grid.Row="3"
          Orientation="Horizontal"
          Margin="0 12 0 0"
          HorizontalAlignment="Right">
          <TextBlock
            VerticalAlignment="Center">
          Telephone Contact
        </TextBlock>
          <ToggleButton
            Margin="8 0 0 0"></ToggleButton>
        </StackPanel>
      </Grid>
    </Grid>
  </materialDesign:Flipper.BackContent>
</materialDesign:Flipper>

In the Material Design in XAML Toolkit has this look:

[bombipappoo]

It looks like a ClearType issue, just like Calendar and Menu.

[Keboo]

I believe @bombipappoo is correct about this being a ClearType issue. I believe this has already been capture in the (fairly old) bug #693. The short version is because this is using 3d rendering bits of WPF the clear type ends up getting disabled.

[fpuglap]

@bombipappoo @Keboo Thank you both. So basically this bug is on WPF Designer side?

I have this quality now:

I think is a reasonable render (please consider it's a .GIF file), at least for me. I just add some code from the Getting Started guide:

In the UserControl:

TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{DynamicResource MaterialDesignPaper}"
TextElement.FontWeight="Medium"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
FontFamily="{materialDesign:MaterialDesignFont}"

And in App.xaml:

<materialDesign:CustomColorTheme BaseTheme="Light" PrimaryColor="Teal" SecondaryColor="Lime" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />

I really don't understand in depth how this code works to improve the quality of controls, but it does.

I don't know if this comment is the correct place to make a question about some stuff related with this topic but I will take advantage of the .GIF I shared. Please correct me if it's not appropriate it and I'll delete the folowing question.

My question is: How to change the Check Icon of the ToggleButton when it flips? In other words is change the predetermined style of Material Design.

<ToggleButton
    x:Name="FlipperButton"
    VerticalAlignment="Center"
    Style="{StaticResource MaterialDesignActionLightToggleButton}"
    Content="{materialDesign:PackIcon ElectricSwitch}" />

I was able to do it in some controls properties but there's some cases that I found it very difficult. Should I bring the full Style file of the control and edit it?

I tried a DataTrigger but doesn't work:

<DataTrigger Binding="{Binding ElementName=FlipperButton, Path=IsChecked}" Value="True">
    <Setter
        TargetName="Border"
        Property="Background"
        Value="{DynamicResource MaterialDesignSelection}" />
    <Setter
        TargetName="FlipperButton"
        Property="Content"
        Value="{materialDesign:PackIcon ElectricSwitch}" />
</DataTrigger>

I'm new to Material Design. Thanks in advance for any help on this.

[bombipappoo]

You can find the example you want in the demo app.

[Keboo]

@theW01f this behavior is due to the way we do the flip animation. What happens is ClearType can be disabled in a number of different circumstances. Anytime there is an element that might cause a potentially transparent background, ClearType gets disabled which is what causes the transparent background. That is also why setting an explicit background in the user control and the TextOptions likely fixes the rendering.

[fpuglap]

You can find the example you want in the demo app.

@bombipappoo This worked perfectly. Thanks

[fpuglap]

@theW01f this behavior is due to the way we do the flip animation. What happens is ClearType can be disabled in a number of different circumstances. Anytime there is an element that might cause a potentially transparent background, ClearType gets disabled which is what causes the transparent background. That is also why setting an explicit background in the user control and the TextOptions likely fixes the rendering.

I didn't know about this behaviour in WPF. Thanks @Keboo. So setting the Background and TextOptions in the UserControl will improve the render of the UI but will not make a perfect render. That's correct?

[Keboo]

Correct, that should at least get you back to clear text. For most situations this will be nearly identical to just using a regular Card control. There may still be some minor differences due to the 3d flip that is happening.

[bombipappoo]

It seems hard to do in 3D, so I tried to pseudo-flip in 2D space like this. https://github.com/bombipappoo/MaterialDesignInXamlToolkit/tree/fliptest Unfortunately, only affine transformations are supported, so the result cannot be the same as projective transformations. What do you think?

[MichelMichels]

This seems fixed in current version (5.0.0).