Search code examples
c#wpfmaterial-design-in-xaml

WPF Material Design Textbox is showing through slides. Is there a workaround?


I tried using a textbox inside a WPF Material Design transitioner slide. The textbox is visible even when changing slides.

enter image description here

A dotted line from the textbox on the next slide is visible, and viceversa.

enter image description here

Has anyone else encountered this issue? Is there any workaround I could use?

This is the xaml I used. I am using the transitioner control although I believe the flipper control causes a similar effect when used with textboxes.

<Grid>
    <materialDesign:Transitioner SelectedIndex="0">
        <materialDesign:TransitionerSlide>
            <StackPanel HorizontalAlignment="Center">
                <TextBlock Text="Hello, this is my first page!" Margin="10"/>
                <TextBox materialDesign:HintAssist.Hint="Type your first text here!" Margin="10"/>
                <Button Command="{x:Static materialDesign:Transitioner.MoveNextCommand}" Content=">" HorizontalAlignment="Center" Margin="10"/>
            </StackPanel>
        </materialDesign:TransitionerSlide>
        <materialDesign:TransitionerSlide>
            <StackPanel HorizontalAlignment="Center">
                <TextBlock Text="Hello, this is my 2nd page!" Margin="15"/>
                <TextBox materialDesign:HintAssist.Hint="Type your second text here!" Margin="15"/>
                <Button Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}" Content="&lt;" HorizontalAlignment="Center" Margin="15"/>
            </StackPanel>
        </materialDesign:TransitionerSlide>
    </materialDesign:Transitioner>
</Grid>

I believe the issue might lie in the dotted line that appears when a textbox is disabled, so possibly by removing that, the textbox would no longer show through slides. But that's just my guess.

Any help is appreciated!


Solution

  • For the best approach, please refer to this answer.

    Try to add the following implicit style to your App.xaml or window:

    <Style TargetType="materialDesign:BottomDashedLineAdorner">
        <Setter Property="Visibility" Value="Collapsed" />
    </Style>