Checkbox in/out animations when IsCheckModeActive changes

Thread is closed for posting
3 posts, 0 answers
  1. Tony
    Tony avatar
    3 posts
    Member since:
    Jan 2013

    Posted 16 Dec 2013 Link to this post


    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...


  2. Victor
    Victor avatar
    1358 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.

    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. 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"/>

    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">
    <ControlTemplate TargetType="CheckBox" x:Name="cbTemplate">
                            <Grid x:Name="grid"
                                  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);
                    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)

                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

Back to Top