Search code examples
c#windows-8microsoft-metroopacitytextblock

Clear text on bluring TextBlock?


I have this xaml code of my metro app.

    <Grid Width="531" Height="531">
        <Grid.Background>
            <ImageBrush ImageSource="{Binding image1}" Stretch="UniformToFill"  />
        </Grid.Background>
        <StackPanel Background="#0072B0" Opacity="0.7" VerticalAlignment="Bottom">
            <Border BorderThickness="0,0,0,1" BorderBrush="White">
                <TextBlock Text="{Binding name}" VerticalAlignment="Bottom" Opacity="1"  Style="{StaticResource BigTopDealItemTitle}"/>
            </Border>
        </StackPanel>
    </Grid>

I wanna make a blur panel and clear text on it. But look like the text in TextBlock blur too, even I set Opacity of it with 1.


Solution

  • To make a background blurry without making the textbox blurry do something like this:

    <Grid Width="531" Height="531">
        <Grid.Background>
            <ImageBrush ImageSource="{Binding image1}" Stretch="UniformToFill"  />
        </Grid.Background>
        <StackPanel Background="#0072B0" Opacity="0.7" VerticalAlignment="Bottom">
            <Grid>
                <Border BorderThickness="0,0,0,1" BorderBrush="White"/>
                <TextBlock Text="{Binding name}" VerticalAlignment="Bottom" Style="{StaticResource BigTopDealItemTitle}"/>
            </Grid>
        </StackPanel>
    </Grid>
    

    This will put the TextBlock on top of the background (i.e. the Border) without it being affected by the properties of the Border.