Silverlight ProgressBar: установить IndeterminateGradientFill динамически? - PullRequest
Новая
       10

Silverlight ProgressBar: установить IndeterminateGradientFill динамически?

1 голос
/ 25 апреля 2011

Я оформляю ProgressBar в SL4 и почти готов, за исключением неопределенной анимации. Это типизированный стиль, и ширина ProgressBar не будет фиксированным значением. Я пытаюсь установить значение "Кому" в раскадровке, но у меня нет особого успеха ... 

<DoubleAnimation Duration="00:00:.5" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X" Storyboard.TargetName="IndeterminateGradientFill" From="0" To="{Binding ElementName=ProgressBarRootGrid, Path=ActualWidth}"/>

Есть предложения?

1 Ответ

2 голосов
/ 25 апреля 2011

Я бы порекомендовал установить горизонтальное выравнивание фигуры в значение Растянуть, а затем анимировать свойство RenderTransforms Scale X.

Это должно привести к началу работы: 

<UserControl x:Class="SilverlightTestImages.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <ControlTemplate x:Key="ProgressBarControlTemplate1" TargetType="ProgressBar">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Determinate"/>
                        <VisualState x:Name="Indeterminate">
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="Black" BorderThickness="1" CornerRadius="2">
                    <Rectangle x:Name="rectangle" Fill="#FF1B6C0B" RadiusX="1" RadiusY="1" RenderTransformOrigin="0,0.5">
                        <Rectangle.RenderTransform>
                            <CompositeTransform ScaleX="0"/>
                        </Rectangle.RenderTransform>
                    </Rectangle>
                </Border>
            </Grid>
        </ControlTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <ProgressBar Height="10" VerticalAlignment="Bottom" Template="{StaticResource ProgressBarControlTemplate1}" IsIndeterminate="True"/>
    </Grid>
</UserControl>

Обновление

Длявыполнить что-то похожее на индикатор выполнения VS2010 немного сложнее из-за некоторых способов настройки анимации перевода.У Джеффа Уилкокса из команды тестирования Silverlight есть хороший контроль, который можно настроить для работы в соответствии с вашими требованиями.Перейдите к http://www.jeff.wilcox.name/2010/08/performanceprogressbar/ и в разделе «Получить код» загрузите файл RelativeAnimatingContentControl.cs.Затем используйте следующую анимацию, это должно быть близко к тому, что вы ищете 

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:Microsoft_Phone_Controls_Unsupported="clr-namespace:Microsoft.Phone.Controls.Unsupported" 
    x:Class="SilverlightTestImages.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <ControlTemplate x:Key="ProgressBarControlTemplate1" TargetType="ProgressBar">
            <Microsoft_Phone_Controls_Unsupported:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Determinate"/>
                        <VisualState x:Name="Indeterminate">
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimation Duration="0:0:1" To="100.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Background" d:IsOptimized="True"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="#FFBCBCBC" BorderThickness="1" CornerRadius="2">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFF5F5F5"/>
                            <GradientStop Color="#FFE5E5E5" Offset="0.49"/>
                            <GradientStop Color="#FFB4B4B4" Offset="0.5"/>
                            <GradientStop Color="#FFC8C8C8" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Grid>
                        <Border BorderBrush="#B2FFFFFF" BorderThickness="1" CornerRadius="2"/>
                        <Rectangle x:Name="Background" RadiusX="1" RadiusY="1" RenderTransformOrigin="0,0.5" Width="100" HorizontalAlignment="Left">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                    <GradientStop Color="#0041DE0C"/>
                                    <GradientStop Color="#9941DE0C" Offset="0.4"/>
                                    <GradientStop Color="#9941DE0C" Offset="0.6"/>
                                    <GradientStop Color="#0041DE0C" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                            <Rectangle.RenderTransform>
                                <CompositeTransform TranslateX="-20.1"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                </Border>
            </Microsoft_Phone_Controls_Unsupported:RelativeAnimatingContentControl>
        </ControlTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <ProgressBar Height="20" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center" Template="{StaticResource ProgressBarControlTemplate1}" IsIndeterminate="True" />
    </Grid>
</UserControl>
...