Hide border when TextBox is empty

Question

I'm trying to have a textbox appear at the end of my game with the winner. I did this using a trigger on the text property that would set the visibility to collapsed when it was empty. Next, I tried adding a border to this textbox. When my textbox is collapsed however (so when the game is still going), the textbox is invisible as before, but the border is already showing as a small black box on the screen.

Does anyone know how I can hide the border until the textbox it's containing isn't empty?

Thanks in advance.

<Border BorderBrush="Black" BorderThickness="2" Canvas.ZIndex="2" Canvas.Left="160" Canvas.Top="225" Background="White"> 
        <TextBlock FontFamily="Helvetica" FontSize="20" FontWeight="Bold"  
                   Text="{Binding WinnerPopup.Value}" Foreground="{Binding WinnerPopup.Value, Converter={StaticResource ownerConverter}}" Padding="15">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <Trigger Property="Text" Value="">
                            <Setter Property="Visibility" Value="Collapsed" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Border>

gomi42 gomi42 · Accepted Answer · 2015-05-24T10:13:01

You can use the following trick to also collapse the border when the TextBlock gets collapsed:

    <Border Canvas.Left="160"
            Canvas.Top="225"
            Background="White"
            BorderBrush="Black"
            BorderThickness="2"
            Canvas.ZIndex="2"
            Visibility="{Binding Visibility,
                                 ElementName=myTextBlock}">
        <TextBlock x:Name="myTextBlock"
                   FontFamily="Helvetica"
                   FontSize="20"
                   FontWeight="Bold"
                   Foreground="{Binding WinnerPopup.Value,
                                        Converter={StaticResource ownerConverter}}"
                   Padding="15"
                   Text="{Binding WinnerPopup.Value}">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <Trigger Property="Text" Value="">
                            <Setter Property="Visibility" Value="Collapsed" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Border>

Hide border when TextBox is empty

1 Answers