Checkbox in/out animations when IsCheckModeActive changes

3 posts, 0 answers
  1. Tony
    Tony avatar
    3 posts
    Member since:
    Jan 2013

    Posted 16 Dec 2013 Link to this post

    Hi,

    how can I add animations when checkboxes are show/hidden in databoundlistbox by using IsCheckModeActive?
    I am looking for similar animations as in WP mail...

    Thanks,
      Tony

  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 18 Dec 2013 Link to this post

    Hello Tony,

    Thanks for writing.
    We'll log this as a feature request since currently it is not supported.
    Please write again if you'd like assistance with something else.

    Regards,
    Victor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Tony
    Tony avatar
    3 posts
    Member since:
    Jan 2013

    Posted 19 Dec 2013 Link to this post

    Hi Victor,

    ok. Hopefully this is supported in the near future.

    For others whom this may concern and need this feature right now,
    I managed to bypass this limitation by utilizing couple of tricks...

    This is cumbersome and a bit silly work-around but works
    adequately (i.e. not perfectly, but good enough for my needs):

    1) create dummy element to xaml
    <Grid x:Name="proxy" Width="0" Height="1" Background="Transparent"></Grid>

    2) create new animation (f.ex as below):
    <Storyboard x:Name="proxySBout">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="proxy">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
               
                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="70"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    3) Bind grid width of ControlTemplate of CheckBoxStyle to the "proxy" element above:
    <Style x:Key="CheckBoxStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="CheckBox">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="CheckBox" x:Name="cbTemplate">
                            <Grid x:Name="grid"
                                  Background="Transparent"
                                  HorizontalAlignment="Left"
                                  Width="{Binding Width, ElementName=proxy, Mode=OneWay}">
    .......
    4) to code-behind:
          // from button
            private void Select_Click(object sender, System.EventArgs e)
            {
                userSelectBtn = true;
                // toggle mode
                this.Items.IsCheckModeActive = !this.Items.IsCheckModeActive;
            }

            static bool userSelectBtn = false;

            // binded event from databoundlistbox (named as Items)
            private void Items_IsCheckModeActiveChanging(object sender, IsCheckModeActiveChangingEventArgs e)
            {
                if (this.Items.IsCheckModeActive)
                    this.Items.Margin = new Thickness(-36, 0, 0, 0);
                else
                    this.Items.Margin = new Thickness(-12, 0, 0, 0);
                // reset proxy grid width (which is binded to checkbox area width)
                this.proxy.Width = 0;
                // animate proxy width
                if (this.Items.IsCheckModeActive && userSelectBtn || !this.Items.IsCheckModeActive && !userSelectBtn)
                    this.proxySBout.Begin();

                userSelectBtn = false;
            }
    5) you need to edit CheckBox style - box position etc fine tuning to make everything look ok, but this is doable...

    If someone discovers a simpler way to do this, please let us know... :D

    Cheers,
    -Tony
Back to Top