Geek asks and answers

Space between dots in Windows Phone

When I use the progress bar (IsIndertiminate = true) inside the width grid, say 120, then the progress animation seems pretty weird. The point of progress seems to move the sidebyside without any proper distance between them. In addition, because of this (less than the width), the influence of points extending / approaching the beginning and end, respectively, is not visible.

So how can I make a progressBar better when I display it in a limited width. I tried to independently find and make some changes to the progressBar property, but could not reach a satisfactory state.

EDIT: Inside grid.row, setting the width of my progressBar to “auto”, I was able to achieve the desired spacing / look (it is still not perfect, but will work for me).

+5
source share
2 answers

This requires some customization of these controls Style Templatein order to make some changes to the forms, which act as oneself ProgressBar.

I don’t have a default style template for WP7 ProgressBar in front of me at the moment, but if you open your project in Expression Blend, right-click on it and select "Edit Template → Edit Copy (OR Edit Original) to open the style template. you’ll see the shapes, and I think that even the Storyboard animation makes it ready for editing in your hearts.

If you provide a copy of the default template, I am sure that we can quickly tear out a solution for you if you do not get it yourself. Hope this helps :)

+2

, !

<Style x:Key="PerformanceProgressBarStyle1" TargetType="toolkit:PerformanceProgressBar">
        <Setter Property="IsIndeterminate" Value="False"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="IsHitTestVisible" Value="False"/>
        <Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:PerformanceProgressBar">
                    <ProgressBar x:Name="EmbeddedProgressBar" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsIndeterminate="{TemplateBinding ActualIsIndeterminate}" Padding="{TemplateBinding Padding}">
                        <ProgressBar.Template>
                            <ControlTemplate TargetType="ProgressBar">
                                <toolkitPrimitives:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                                    <toolkitPrimitives:RelativeAnimatingContentControl.Resources>
                                        <ExponentialEase x:Key="ProgressBarEaseOut" EasingMode="EaseOut" Exponent="1"/>
                                        <ExponentialEase x:Key="ProgressBarEaseIn" EasingMode="EaseIn" Exponent="1"/>
                                    </toolkitPrimitives:RelativeAnimatingContentControl.Resources>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Determinate"/>
                                            <VisualState x:Name="Indeterminate">
                                                <Storyboard Duration="00:00:04.4" RepeatBehavior="Forever">
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="X" Storyboard.TargetName="R1TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">
                                                        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
                                                        <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
                                                        <EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R1">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R2">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R3">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R4">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R5">
                                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}">
                                        <Grid HorizontalAlignment="Left">
                                            <Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R1TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R2" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R2TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R3" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R3TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R4" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R4TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                            <Rectangle x:Name="R5" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
                                                <Rectangle.RenderTransform>
                                                    <TranslateTransform x:Name="R5TT"/>
                                                </Rectangle.RenderTransform>
                                            </Rectangle>
                                        </Grid>
                                    </Border>
                                </toolkitPrimitives:RelativeAnimatingContentControl>
                            </ControlTemplate>
                        </ProgressBar.Template>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisibilityStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.25" To="Normal"/>
                                    <VisualTransition GeneratedDuration="0:0:0.75" To="Hidden"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EmbeddedProgressBar"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ProgressBar>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

, Widht = "2" Height = "2" , , !

   <Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="2" IsHitTestVisible="False" Opacity="0" Width="2">

, . ProgresBar.

.

+1

More articles:


All Articles