如何为网格背景而不是网格中的控件设置图像的不透明度?

时间:2014-11-21 14:52:47

标签: wpf xaml

我希望我的背景图片能够为不透明度设置动画,但不要将控件“叠加”在它上面。这是我的工作XAML,但目前控件(组合框等)也随着图像淡入淡出。如何更改它以便控件也不会改变?

<Window x:Class="george.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" >
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Border>
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="/George_mcfly.jpg" />
                    </Setter.Value>
                </Setter>
                <Setter Property="Opacity" Value="0.4" />
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Border.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="0.8" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Border.MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="0.3"  AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                </Style.Triggers>
            </Style>
        </Border.Style>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="60"/>
                <RowDefinition Height="60"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label Content="{Binding ApplicationName}" FontSize="18" Grid.ColumnSpan="2" />
            <Label Content="Version:" Grid.Row="1" FontWeight="Bold" FontSize="14"/>
            <Label Content="{Binding Version}" FontSize="14" Foreground="Red" Grid.Row="1" Grid.Column="1"/>

            <Label Content="Current Connection:" Grid.Row="2" FontWeight="Bold"/>
            <Label Content="example" Grid.Row="2" Grid.Column="1"/>

            <ComboBox Grid.Row="3">
                <ComboBoxItem Content="A" />
                <ComboBoxItem Content="B" />
            </ComboBox>
            <Label Content="User Name: " Grid.Row="4" FontWeight="Bold"/>
            <Label Content="sample text" Grid.Row="4" Grid.Column="1"/>

            <Label Content="Active Directory Groups: " Grid.Row="5" FontWeight="Bold"/>
            <ListBox  Grid.Row="5" Grid.Column="1" Background="Transparent" BorderBrush="Transparent">
                <ListBoxItem Content="1" />
                <ListBoxItem Content="2" />
                <ListBoxItem Content="3" />
                <ListBoxItem Content="4" />
            </ListBox>
        </Grid>
    </Border>
</Grid>

1 个答案:

答案 0 :(得分:1)

只需分离父子关系,这很简单,因为你已将它嵌入网格中;

    <Window x:Class="george.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border>
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="/George_mcfly.jpg" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Opacity" Value="0.4" />
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Border.MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation To="0.8" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Border.MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation To="0.3"  AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity"></DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
<!-- We end the Border so it's only behind the elements instead of acting as their parent -->
            </Border>
            <Grid Grid.Row="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Label Content="{Binding ApplicationName}" FontSize="18" Grid.ColumnSpan="2" />
                <Label Content="Version:" Grid.Row="1" FontWeight="Bold" FontSize="14"/>
                <Label Content="{Binding Version}" FontSize="14" Foreground="Red" Grid.Row="1" Grid.Column="1"/>

                <Label Content="Current Connection:" Grid.Row="2" FontWeight="Bold"/>
                <Label Content="example" Grid.Row="2" Grid.Column="1"/>

                <ComboBox Grid.Row="3">
                    <ComboBoxItem Content="A" />
                    <ComboBoxItem Content="B" />
                </ComboBox>
                <Label Content="User Name: " Grid.Row="4" FontWeight="Bold"/>
                <Label Content="sample text" Grid.Row="4" Grid.Column="1"/>

                <Label Content="Active Directory Groups: " Grid.Row="5" FontWeight="Bold"/>
                <ListBox  Grid.Row="5" Grid.Column="1" Background="Transparent" BorderBrush="Transparent">
                    <ListBoxItem Content="1" />
                    <ListBoxItem Content="2" />
                    <ListBoxItem Content="3" />
                    <ListBoxItem Content="4" />
                </ListBox>
            </Grid>

    </Grid>

对于McFly来说,哦和+1,Marty和医生在哪里? :)

哦,而且,您可以考虑将这些事件附加到父网格,并仅使用TargetNameTargetObject定位动画中的边框,因为现在只有边框会执行此操作

相关问题