This is a migrated thread and some comments may be shown as answers.

Checkbox in/out animations when IsCheckModeActive changes

2 Answers 44 Views
DataBoundListBox
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Tony
Top achievements
Rank 1
Tony asked on 16 Dec 2013, 07:40 AM
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 Answers, 1 is accepted

Sort by
0
Victor
Telerik team
answered on 18 Dec 2013, 12:56 PM
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.
0
Tony
Top achievements
Rank 1
answered on 19 Dec 2013, 08:41 AM
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
Tags
DataBoundListBox
Asked by
Tony
Top achievements
Rank 1
Answers by
Victor
Telerik team
Tony
Top achievements
Rank 1
Share this question
or