Question

使用.NET 3.5

我有一个UserControl，背景为LinearGradientBrush。

我想知道如何在用户控件上的属性发生变化时，将整个控件更改为不同的颜色并产生脉动。

例如，如果我说MyUserControl.Prop1 = 20然后将颜色更改为红色和脉冲（通过脉动，我的意思是更亮，然后更暗，来回切换）。然后当MyUserControl.Prop1 = 0它返回原始颜色时。

我最好在推出不同的颜色时保持渐变背景，但如果这是不可能的那么就是这样呢

任何指针或链接都会很棒。我用谷歌搜索了这个，但没有找到任何有用的东西。

这是我的UserControl

<UserControl x:Class="StatusPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Margin="11" >

<Grid>
    <Border Margin="-5" BorderBrush="Black" BorderThickness="1" CornerRadius="30" >
    <Border.Effect>
        <DropShadowEffect />
    </Border.Effect>

    <Border.Background >
        <LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="Silver" Offset="1"/>
        </LinearGradientBrush>
    </Border.Background>
    </Border>

    <StackPanel Orientation="Vertical">
            <!-- All my user contraols defined here -->
    </StackPanel>    
</Grid>    
</UserControl>

Answer 1

基于Prop1执行此类操作有点不寻常。更典型的是，你可以在Hover或Focused等视觉状态下进行。

此问题的答案还取决于您使用的WPF版本。你没有指定。如果您至少使用.Net 4.0，我建议您利用VisualStateManager。这适用于用户控件和控件模板，它只需要更多的手动工作。 :)例如：

<UserControl 
    x:Class="WpfUserControlTestLibrary.Pulse"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="Prop1State">

            <VisualState Name="Default">
                <Storyboard />
            </VisualState>

            <VisualState x:Name="Error">
                <Storyboard>
                    <ColorAnimation 
                        To="Pink" 
                        Storyboard.TargetName="Stop1" Storyboard.TargetProperty="Color" 
                        Duration="0:0:2" />
                    <ColorAnimation 
                        To="Maroon" 
                        Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color" 
                        Duration="0:0:2" />
                    <ColorAnimation 
                        To="Red" 
                        Storyboard.TargetName="Stop1" Storyboard.TargetProperty="Color" 
                        BeginTime="0:0:2" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                    <ColorAnimation 
                        To="Blue" 
                        Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color" 
                        BeginTime="0:0:2" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
            </VisualState>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="30" Margin="-5">
        <Border.Effect>
            <DropShadowEffect />
        </Border.Effect>

        <Border.Background>
            <LinearGradientBrush EndPoint="0 0" StartPoint="1 1">
                <GradientStop x:Name="Stop1" Color="White" Offset="0" />
                <GradientStop x:Name="Stop2" Color="Silver" Offset="1" />
            </LinearGradientBrush>
        </Border.Background>
        <StackPanel Orientation="Vertical" Margin="15">
            <Button Content="Default" Click="Button_Click_1" />
            <Button Content="Error" Click="Button_Click" />
        </StackPanel>

    </Border>
</UserControl>

后面的代码如下：

private void Button_Click(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToElementState(this, "Error", false);
}

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToElementState(this, "Default", false);
}

Answer 2

由于某种原因无法发表评论！

Greg很好的回答，谢谢你。不幸的是我正在使用3.5 ..当我第一次问Q时忘了提及

这就是我解决它的方法：

<UserControl.Resources>
    <Storyboard Name="FadeOutStoryboard" x:Key="FadeOutStoryboard" >
        <DoubleAnimation Storyboard.TargetName="userControlStatusPanel" 
                         Storyboard.TargetProperty="Opacity" 
                         From="1" To="0" Duration="0:0:3" RepeatBehavior="Forever"  />
    </Storyboard>
</UserControl.Resources>

        Storyboard sb = (Storyboard)UserControl.FindResource("FadeOutStoryboard");
        LinearGradientBrush myBrush = new LinearGradientBrush();
        myBrush.EndPoint = new Point(0, 0);
        myBrush.StartPoint = new Point(1, 1);

        if (runProgress.Percent == 100)
        {
            myBrush.GradientStops.Add(new GradientStop(Colors.Green, 0));
            myBrush.GradientStops.Add(new GradientStop(Colors.Silver, 1));
            sb.Stop();
        }
        else (runProgress.Percent <= 100)
        {
            myBrush.GradientStops.Add(new GradientStop(Colors.Red, 0));
            myBrush.GradientStops.Add(new GradientStop(Colors.Silver, 1));
            sb.Begin();
        }
        UserControl.borderMain.Background = myBrush;
    }

WPF：UserControl脉冲背景颜色

2 个答案: