locked
Binding animation to template width (Michaela Meier) - 11/20/2007 12:20 AM PST RRS feed

  • Question

  • By: Michaela Meier


    Hi,
    
    I'm trying to create a an animated effect where a rectangle is supposed to 
    move within the bounds of its parent - some kind of indeterminate 
    progressbar thingie. i.e. it starts at "x"=0 (left), moves to the far right 
    (x=width) and back again.
    Only problem is: I can't seem to bind the end position of the rectangle to 
    the width of the parent/template. Neither by tempalte nor data binding. It 
    just won't move. If I enter a number it works like expected.
    
    Any idea about this?
    
    
    Thursday, February 21, 2008 7:58 PM

All replies

  • By: Brennon Williams

    Howdy,
    
    Can you post your markup please.
    
    Cheers
    -- 
    Want to learn how to use Blend and visual studio?
    
    http://www.learnexpressionstudio.com
    http://www.expressionblend.com
    http://www.x-coders.com
    
    
    "Michaela Meier" wrote:
    
    > Hi,
    > 
    > I'm trying to create a an animated effect where a rectangle is supposed to 
    > move within the bounds of its parent - some kind of indeterminate 
    > progressbar thingie. i.e. it starts at "x"=0 (left), moves to the far right 
    > (x=width) and back again.
    > Only problem is: I can't seem to bind the end position of the rectangle to 
    > the width of the parent/template. Neither by tempalte nor data binding. It 
    > just won't move. If I enter a number it works like expected.
    > 
    > Any idea about this?
    > 
    > 
    Friday, February 22, 2008 6:19 PM
  • By: Michaela Meier

    This is the working example (hardcoded width)

    Window
    xmlns="
    http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="
    http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="UntitledProject2.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480">

    <Window.Resources>

    <!-- Simple SimpleProgressBar
    The template uses two Border controls to show the Track and Progress
    Limitations : It only supports a horizontal orientated ProgressBar -->
    <Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ProgressBar}">
    <ControlTemplate.Resources>
    <Storyboard x:Key="Timeline1">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    RepeatBehavior="Forever" Storyboard.TargetName="MoveIt"
    Storyboard.TargetProperty="(FrameworkElement.Width)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="10"/>
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="400"/>
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="10"/>
    </DoubleAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
    RepeatBehavior="Forever" Storyboard.TargetName="MoveIt"
    Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static
    HorizontalAlignment.Left}"/>
    <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static
    HorizontalAlignment.Right}"/>
    <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="{x:Static
    HorizontalAlignment.Right}"/>
    <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="{x:Static
    HorizontalAlignment.Left}"/>
    <DiscreteObjectKeyFrame KeyTime="00:00:04" Value="{x:Static
    HorizontalAlignment.Left}"/>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </ControlTemplate.Resources>
    <Grid>

    <!-- This Border is the track. It must be named PART_Track -->
    <Border x:Name="PART_Track" Background="{DynamicResource
    PressedBrush}" BorderBrush="{DynamicResource SolidBorderBrush}"
    BorderThickness="1" CornerRadius="2"/>

    <!-- This Border shows progress. It must be named PART_Indicator for
    the control to function -->
    <Border HorizontalAlignment="Left" x:Name="PART_Indicator"
    Background="{DynamicResource MouseOverBrush}" BorderBrush="{DynamicResource
    NormalBorderBrush}" BorderThickness="1" CornerRadius="2"/>

    <Border x:Name="MoveIt" Background="{DynamicResource MouseOverBrush}"
    BorderBrush="{DynamicResource NormalBorderBrush}" BorderThickness="1"
    CornerRadius="2" HorizontalAlignment="Left" Width="0"/>

    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="IsIndeterminate" Value="True">
    <Trigger.EnterActions>
    <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
    </Trigger.EnterActions>
    <Setter Property="Visibility" TargetName="PART_Indicator"
    Value="Hidden"/>
    <Setter Property="Visibility" TargetName="MoveIt" Value="Visible"/>
    </Trigger>
    <Trigger Property="IsIndeterminate" Value="False">
    <Setter Property="Visibility" TargetName="PART_Indicator"
    Value="Visible"/>
    <Setter Property="Visibility" TargetName="MoveIt" Value="Hidden"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>

    </Window.Resources>

    <Grid x:Name="LayoutRoot">
    <ProgressBar Margin="80,120,144,0" Style="{DynamicResource
    ProgressBarStyle1}" VerticalAlignment="Top" Height="40"
    IsIndeterminate="True"/>
    </Grid>
    </Window>


    However, exchanging the timeline with one that does some data binding won't
    work at all - at least when I use Blend
    I choose "template binding" from "advanced properties" and select "width".
    Blend highlights the border of the label, custom expression shows
    "{TemplateBinding Width}" but in XAML not a thing changes. Same goes for
    "data binding". Custom expression ist now "{Binding Path=Width,
    ElementName=PART_Track, Mode=Default}" but in XAML ... zilch ... still a
    hardcoded number.

    <Storyboard x:Key="Timeline2">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="MoveIt"
    Storyboard.TargetProperty="(FrameworkElement.Width)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    Now, if I edit the XAML code and replace
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
    with
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="{TemplateBinding
    Width}" />
    the project even crashes on execution


    The only thing that *does* work is when I do binding *outside* a template.
    But even then I need to edit the XAML code manually to insert "{Binding
    ....}"

    Like this:

    <Window
    xmlns="
    http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="
    http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="UntitledProject1.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480">

    <Window.Resources>
    <Storyboard x:Key="Timeline1">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="rcMove"
    Storyboard.TargetProperty="(FrameworkElement.Width)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="{Binding Path=Width,
    ElementName=bdParent, Mode=Default}"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    </Window.Resources>
    <Window.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
    <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
    </EventTrigger>
    </Window.Triggers>

    <Grid x:Name="LayoutRoot">
    <Border Margin="8,8,0,0" Background="#FFD8B025" CornerRadius="8,8,8,8"
    BorderThickness="1,1,1,1" BorderBrush="#FF9F7B00" x:Name="bdParent"
    Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Height="16">
    <Rectangle Stroke="#FF000000" RadiusX="7.5" RadiusY="7.5" Height="Auto"
    HorizontalAlignment="Left" VerticalAlignment="Stretch" x:Name="rcMove"
    Width="50">
    <Rectangle.Fill>
    <LinearGradientBrush EndPoint="0.5,1.062" StartPoint="0.5,-0.062">
    <GradientStop Color="#FFFFFFFF" Offset="0"/>
    <GradientStop Color="#FFFFC600" Offset="1"/>
    </LinearGradientBrush>
    </Rectangle.Fill>
    </Rectangle>
    </Border>
    <Button HorizontalAlignment="Left" Margin="8,28,0,0" x:Name="button"
    VerticalAlignment="Top" Content="Start"/>
    </Grid>
    </Window>

    So what am I doing wrong? :-/
    Friday, February 22, 2008 6:20 PM
  • By: Brennon Williams

    Howdy,
    
    So when you edit the template and you are trying to bind the Width property 
    of the MoveIt boarder element, did you select template binding in the 
    advanced property options?
    
    If you select just Data Binding then the Element Property tab and then find 
    the Grid element in the Scene elements pain on the left, then select the 
    ActualWidth property, I think that is what you are trying to achieve?
    
    Let me know
    
    Cheers
    -- 
    Want to learn how to use Blend and visual studio?
    
    http://www.learnexpressionstudio.com
    http://www.expressionblend.com
    http://www.x-coders.com
    
    
    "Michaela Meier" wrote:
    
    > This is the working example (hardcoded width)
    > 
    > Window
    >  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    >  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >  x:Class="UntitledProject2.Window1"
    >  x:Name="Window"
    >  Title="Window1"
    >  Width="640" Height="480">
    > 
    >  <Window.Resources>
    > 
    >   <!-- Simple SimpleProgressBar
    >   The template uses two Border controls to show the Track and Progress
    >   Limitations : It only supports a horizontal orientated ProgressBar -->
    >   <Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">
    >    <Setter Property="Template">
    >     <Setter.Value>
    >      <ControlTemplate TargetType="{x:Type ProgressBar}">
    >       <ControlTemplate.Resources>
    >        <Storyboard x:Key="Timeline1">
    >         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
    > RepeatBehavior="Forever" Storyboard.TargetName="MoveIt" 
    > Storyboard.TargetProperty="(FrameworkElement.Width)">
    >          <SplineDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
    >          <SplineDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
    >          <SplineDoubleKeyFrame KeyTime="00:00:02" Value="10"/>
    >          <SplineDoubleKeyFrame KeyTime="00:00:03" Value="400"/>
    >          <SplineDoubleKeyFrame KeyTime="00:00:04" Value="10"/>
    >         </DoubleAnimationUsingKeyFrames>
    >         <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" 
    > RepeatBehavior="Forever" Storyboard.TargetName="MoveIt" 
    > Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
    >          <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static 
    > HorizontalAlignment.Left}"/>
    >          <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static 
    > HorizontalAlignment.Right}"/>
    >          <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="{x:Static 
    > HorizontalAlignment.Right}"/>
    >          <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="{x:Static 
    > HorizontalAlignment.Left}"/>
    >          <DiscreteObjectKeyFrame KeyTime="00:00:04" Value="{x:Static 
    > HorizontalAlignment.Left}"/>
    >         </ObjectAnimationUsingKeyFrames>
    >        </Storyboard>
    >       </ControlTemplate.Resources>
    >       <Grid>
    > 
    >        <!-- This Border is the track. It must be named PART_Track -->
    >        <Border x:Name="PART_Track" Background="{DynamicResource 
    > PressedBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" 
    > BorderThickness="1" CornerRadius="2"/>
    > 
    >        <!-- This Border shows progress. It must be named PART_Indicator for 
    > the control to function -->
    >        <Border HorizontalAlignment="Left" x:Name="PART_Indicator" 
    > Background="{DynamicResource MouseOverBrush}" BorderBrush="{DynamicResource 
    > NormalBorderBrush}" BorderThickness="1" CornerRadius="2"/>
    > 
    >        <Border x:Name="MoveIt" Background="{DynamicResource MouseOverBrush}" 
    > BorderBrush="{DynamicResource NormalBorderBrush}" BorderThickness="1" 
    > CornerRadius="2" HorizontalAlignment="Left" Width="0"/>
    > 
    >       </Grid>
    >       <ControlTemplate.Triggers>
    >        <Trigger Property="IsIndeterminate" Value="True">
    >         <Trigger.EnterActions>
    >          <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
    >         </Trigger.EnterActions>
    >         <Setter Property="Visibility" TargetName="PART_Indicator" 
    > Value="Hidden"/>
    >         <Setter Property="Visibility" TargetName="MoveIt" Value="Visible"/>
    >        </Trigger>
    >        <Trigger Property="IsIndeterminate" Value="False">
    >         <Setter Property="Visibility" TargetName="PART_Indicator" 
    > Value="Visible"/>
    >         <Setter Property="Visibility" TargetName="MoveIt" Value="Hidden"/>
    >        </Trigger>
    >       </ControlTemplate.Triggers>
    >      </ControlTemplate>
    >     </Setter.Value>
    >    </Setter>
    >   </Style>
    > 
    >  </Window.Resources>
    > 
    >  <Grid x:Name="LayoutRoot">
    >   <ProgressBar Margin="80,120,144,0" Style="{DynamicResource 
    > ProgressBarStyle1}" VerticalAlignment="Top" Height="40" 
    > IsIndeterminate="True"/>
    >  </Grid>
    > </Window>
    > 
    > 
    > However, exchanging the timeline with one that does some data binding won't 
    > work at all - at least when I use Blend
    > I choose "template binding" from "advanced properties" and select "width". 
    > Blend highlights the border of the label, custom expression shows 
    > "{TemplateBinding Width}"  but in XAML not a thing changes. Same goes for 
    > "data binding". Custom expression ist now "{Binding Path=Width, 
    > ElementName=PART_Track, Mode=Default}" but in XAML ... zilch ... still a 
    > hardcoded number.
    > 
    >        <Storyboard x:Key="Timeline2">
    >         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
    > Storyboard.TargetName="MoveIt" 
    > Storyboard.TargetProperty="(FrameworkElement.Width)">
    >          <SplineDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
    >          <SplineDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
    >         </DoubleAnimationUsingKeyFrames>
    >        </Storyboard>
    > 
    > Now, if I edit the XAML code and replace
    >          <SplineDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
    > with
    >          <SplineDoubleKeyFrame KeyTime="00:00:01" Value="{TemplateBinding 
    > Width}" />
    > the project even crashes on execution
    > 
    > 
    > The only thing that *does* work is when I do binding *outside* a template.
    > But even then I need to edit the XAML code manually to insert "{Binding 
    > ....}"
    > 
    > Like this:
    > 
    > <Window
    >  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    >  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >  x:Class="UntitledProject1.Window1"
    >  x:Name="Window"
    >  Title="Window1"
    >  Width="640" Height="480">
    > 
    >  <Window.Resources>
    >   <Storyboard x:Key="Timeline1">
    >    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
    > Storyboard.TargetName="rcMove" 
    > Storyboard.TargetProperty="(FrameworkElement.Width)">
    >     <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    >     <SplineDoubleKeyFrame KeyTime="00:00:01" Value="{Binding Path=Width, 
    > ElementName=bdParent, Mode=Default}"/>
    >    </DoubleAnimationUsingKeyFrames>
    >   </Storyboard>
    > 
    >  </Window.Resources>
    >  <Window.Triggers>
    >   <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
    >    <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
    >   </EventTrigger>
    >  </Window.Triggers>
    > 
    >  <Grid x:Name="LayoutRoot">
    >   <Border Margin="8,8,0,0" Background="#FFD8B025" CornerRadius="8,8,8,8" 
    > BorderThickness="1,1,1,1" BorderBrush="#FF9F7B00" x:Name="bdParent" 
    > Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Height="16">
    >    <Rectangle Stroke="#FF000000" RadiusX="7.5" RadiusY="7.5" Height="Auto" 
    > HorizontalAlignment="Left" VerticalAlignment="Stretch" x:Name="rcMove" 
    > Width="50">
    >     <Rectangle.Fill>
    >      <LinearGradientBrush EndPoint="0.5,1.062" StartPoint="0.5,-0.062">
    >       <GradientStop Color="#FFFFFFFF" Offset="0"/>
    >       <GradientStop Color="#FFFFC600" Offset="1"/>
    >      </LinearGradientBrush>
    >     </Rectangle.Fill>
    >    </Rectangle>
    >   </Border>
    >   <Button HorizontalAlignment="Left" Margin="8,28,0,0" x:Name="button" 
    > VerticalAlignment="Top" Content="Start"/>
    >  </Grid>
    > </Window>
    > 
    > So what am I doing wrong? :-/
    > 
    > 
    Friday, February 22, 2008 6:21 PM
  • By: Michaela Meier

    "Brennon Williams" <BrennonWilliams@discussions.microsoft.com> schrieb im
    Newsbeitrag news:860D7FEA-1BF5-43A8-801B-C3E0EEA622CE@microsoft.com...

    > So when you edit the template and you are trying to bind the Width
    > property
    > of the MoveIt boarder element, did you select template binding in the
    > advanced property options?

    As I said ....
    ..... I choose "template binding" from "advanced properties" and select
    "width".
    Blend highlights the border of the label, custom expression shows
    "{TemplateBinding Width}" but in XAML not a thing changes. Same goes for
    "data binding". Custom expression ist now "{Binding Path=Width,
    ElementName=PART_Track, Mode=Default}"


    > If you select just Data Binding then the Element Property tab and then
    > find
    > the Grid element in the Scene elements pain on the left, then select the
    > ActualWidth property, I think that is what you are trying to achieve?

    The results for both "width" and "actualwidth" are the same. Either nothing
    moves cause changes didn't make it into the XAML code (why?) or the damn
    thing crashes when I copy&paste the custom expression (see above) into the
    code ... but only when I do it inside a template (again why?)

    Friday, February 22, 2008 6:25 PM
  • By: Unni Ravindranathan (MS)

    What crashes - Blend or your application that you run from Blend?
    
    I think your best bet would be to:
    a) Subclass ProgressBar and expose a property that determines the offset.
    b) Use a ValuConverter
    
    The problem is that in a dynamic layout system, there are a ton of 
    properties that control layout - height/width, margin in the case of Grid 
    for example.
    
    Thanks,
    -Unni
    
    "Michaela Meier" <mjmnothanks@yahoo.com> wrote in message 
    news:O868wW3KIHA.1324@TK2MSFTNGP06.phx.gbl...
    > "Brennon Williams" <BrennonWilliams@discussions.microsoft.com> schrieb im 
    > Newsbeitrag news:860D7FEA-1BF5-43A8-801B-C3E0EEA622CE@microsoft.com...
    >
    >> So when you edit the template and you are trying to bind the Width 
    >> property
    >> of the MoveIt boarder element, did you select template binding in the
    >> advanced property options?
    >
    > As I said ....
    > .... I choose "template binding" from "advanced properties" and select 
    > "width".
    > Blend highlights the border of the label, custom expression shows
    > "{TemplateBinding Width}"  but in XAML not a thing changes. Same goes for
    > "data binding". Custom expression ist now "{Binding Path=Width,
    > ElementName=PART_Track, Mode=Default}"
    >
    >
    >> If you select just Data Binding then the Element Property tab and then 
    >> find
    >> the Grid element in the Scene elements pain on the left, then select the
    >> ActualWidth property, I think that is what you are trying to achieve?
    >
    > The results for both "width" and "actualwidth" are the same. Either 
    > nothing moves cause changes didn't make it into the XAML code (why?) or 
    > the damn thing crashes when I copy&paste the custom expression (see above) 
    > into the code ... but only when I do it inside a template (again why?)
    >
    > 
    Friday, February 22, 2008 6:25 PM
  • By: Brennon Williams

    Howdy Michaela,
    
    I get :
    
    {Binding Path=ActualWidth, ElementName=Grid, Mode=Default}
    
    When I go the Databinding route and when I resize the applicaiton, the 
    progress bar does go to the full extent?
    
    I dont know why you are having issues with it and it looks like the 
    TemplateBinding part is binding to the wrong element.
    
    The following is made from your markup (the colors are different because of 
    my stuff)
    
    
    <Window.Resources>
    
      <!-- Simple SimpleProgressBar
      The template uses two Border controls to show the Track and Progress
      Limitations : It only supports a horizontal orientated ProgressBar -->
      <Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type ProgressBar}">
          <ControlTemplate.Resources>
           <Storyboard x:Key="Timeline1">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
    RepeatBehavior="Forever" Storyboard.TargetName="MoveIt" 
    Storyboard.TargetProperty="(FrameworkElement.Width)">
             <SplineDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
             <SplineDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
             <SplineDoubleKeyFrame KeyTime="00:00:02" Value="10"/>
             <SplineDoubleKeyFrame KeyTime="00:00:03" Value="400"/>
             <SplineDoubleKeyFrame KeyTime="00:00:04" Value="10"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" 
    RepeatBehavior="Forever" Storyboard.TargetName="MoveIt" 
    Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
             <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static 
    HorizontalAlignment.Left}"/>
             <DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static 
    HorizontalAlignment.Right}"/>
             <DiscreteObjectKeyFrame KeyTime="00:00:02" Value="{x:Static 
    HorizontalAlignment.Right}"/>
             <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="{x:Static 
    HorizontalAlignment.Left}"/>
             <DiscreteObjectKeyFrame KeyTime="00:00:04" Value="{x:Static 
    HorizontalAlignment.Left}"/>
            </ObjectAnimationUsingKeyFrames>
           </Storyboard>
          </ControlTemplate.Resources>
          <Grid x:Name="Grid">
    
    							<Border x:Name="PART_Track" Background="{DynamicResource {x:Static 
    SystemColors.ActiveBorderBrushKey}}" BorderBrush="{DynamicResource {x:Static 
    SystemColors.ActiveCaptionTextBrushKey}}" 
    								BorderThickness="1" CornerRadius="2"/>
    
    							<Border HorizontalAlignment="Left" x:Name="PART_Indicator" 
    								Background="{DynamicResource {x:Static 
    SystemColors.MenuHighlightBrushKey}}" BorderBrush="{DynamicResource {x:Static 
    SystemColors.MenuBrushKey}}" BorderThickness="1" CornerRadius="2"/>
    
    							<Border x:Name="MoveIt" Background="{DynamicResource {x:Static 
    SystemColors.InfoBrushKey}}" 
    								BorderBrush="{DynamicResource {x:Static 
    SystemColors.InactiveCaptionTextBrushKey}}" BorderThickness="1" 
    								CornerRadius="2" HorizontalAlignment="Left" Width="{Binding 
    Path=ActualWidth, ElementName=Grid, Mode=Default}"/>
    
    						</Grid>
          <ControlTemplate.Triggers>
           <Trigger Property="IsIndeterminate" Value="True">
            <Trigger.EnterActions>
             <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
            </Trigger.EnterActions>
            <Setter Property="Visibility" TargetName="PART_Indicator" 
    Value="Hidden"/>
            <Setter Property="Visibility" TargetName="MoveIt" Value="Visible"/>
           </Trigger>
           <Trigger Property="IsIndeterminate" Value="False">
            <Setter Property="Visibility" TargetName="PART_Indicator" 
    Value="Visible"/>
            <Setter Property="Visibility" TargetName="MoveIt" Value="Hidden"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
    
     </Window.Resources>
    
     <Grid x:Name="LayoutRoot">
      <ProgressBar Margin="80,120,41,0" Style="{DynamicResource 
    ProgressBarStyle1}" VerticalAlignment="Top" Height="40" 
    			IsIndeterminate="True" Background="#FFDEBE2B"/>
     </Grid>
    </Window>
    
    
    
    Cheers
    
    -- 
    Want to learn how to use Blend and visual studio?
    
    http://www.learnexpressionstudio.com
    http://www.expressionblend.com
    http://www.x-coders.com
    
    
    "Michaela Meier" wrote:
    
    > "Brennon Williams" <BrennonWilliams@discussions.microsoft.com> schrieb im 
    > Newsbeitrag news:860D7FEA-1BF5-43A8-801B-C3E0EEA622CE@microsoft.com...
    > 
    > > So when you edit the template and you are trying to bind the Width 
    > > property
    > > of the MoveIt boarder element, did you select template binding in the
    > > advanced property options?
    > 
    > As I said ....
    > ..... I choose "template binding" from "advanced properties" and select 
    > "width".
    > Blend highlights the border of the label, custom expression shows
    > "{TemplateBinding Width}"  but in XAML not a thing changes. Same goes for
    > "data binding". Custom expression ist now "{Binding Path=Width,
    > ElementName=PART_Track, Mode=Default}"
    > 
    > 
    > > If you select just Data Binding then the Element Property tab and then 
    > > find
    > > the Grid element in the Scene elements pain on the left, then select the
    > > ActualWidth property, I think that is what you are trying to achieve?
    > 
    > The results for both "width" and "actualwidth" are the same. Either nothing 
    > moves cause changes didn't make it into the XAML code (why?) or the damn 
    > thing crashes when I copy&paste the custom expression (see above) into the 
    > code ... but only when I do it inside a template (again why?)
    > 
    > 
    > 
    Friday, February 22, 2008 6:28 PM
  • By: Brennon Williams

    Howdy,
    
    Yeah its all a bit of a mess...
    
    Just thought you should know that in the markup I posted back, even though 
    it aint exactly right in terms of what you need to happen, I didnt handcode 
    anything; it was done using Blends binding panel.
    
    Unni's suggestion is where you need to be heading to get this to work 
    correctly the way you want it to. It would be a lot cleaner, thats for sure.
    
    Cheers
    
    -- 
    Want to learn how to use Blend and visual studio?
    
    http://www.learnexpressionstudio.com
    http://www.expressionblend.com
    http://www.x-coders.com
    
    
    "Michaela Meier" wrote:
    
    > "Brennon Williams" <BrennonWilliams@discussions.microsoft.com> schrieb im 
    > Newsbeitrag news:181DD996-BBA1-455F-922B-FA264B14E7F2@microsoft.com...
    > 
    > > I get :
    > >
    > > {Binding Path=ActualWidth, ElementName=Grid, Mode=Default}
    > >
    > > When I go the Databinding route and when I resize the applicaiton, the
    > > progress bar does go to the full extent?
    > >
    > > I dont know why you are having issues with it and it looks like the
    > > TemplateBinding part is binding to the wrong element.
    > 
    > It tried "{Binding Path=ActualWidth, ElementName=Grid, Mode=Default}", too, 
    > but in a _template_ (template!) the app crashes when I test it, the compiled 
    > exe crashes.
    > Using the _same_ code outside a template, i.e. simply 2 objects somewhere on 
    > a window, it works fine.
    > 
    > And of course your example works, too, cause you're still using the 
    > hardcoded boundaries - which is no problem even in the template.
    > >        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="10"/>
    > >         <SplineDoubleKeyFrame KeyTime="00:00:01" Value="400"/>
    > >        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="10"/>
    > >        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="400"/>
    > >         <SplineDoubleKeyFrame KeyTime="00:00:04" Value="10"/>
    > 
    > And it even _looks like_ it goes to the full extent, because it changes 
    > alignment accordingly.
    > The "indicator" starts with alignment=left _at_ the left , increases its 
    > width and moves to the right, then changes alignment (=right), decreases its 
    > width but still moves to the left.
    > If the progressbar is wider than 400 there's a jump in between these steps 
    > an the movement feels jerky.
    > This is what it's supposed to do:
    > |ooooo_____|    (step 1: left aligned, increasing width, moving ->)
    > |__ooooo___|
    > |____ooooo_|
    > |_____ooooo|
    > |______oooo|   (step 2: right aligned, decreasing width, still moving ->)
    > |________oo|
    > |__________|
    > 
    > Now, if the width of the track doesn't fit the hardcoded value the result 
    > will be something like this
    > |ooooo______________| (step 1)
    > |__ooooo____________|
    > |____ooooo__________|
    > |_____ooooo_________|
    > |______________ooooo| (step 2: sudden jump to right aligned indicator)
    > |________________ooo|
    > |__________________o|
    > 
    > 
    > 
    > 
    Friday, February 22, 2008 6:29 PM