Question

I am trying to build a ListBox with items that have edit states. I created a separate DataTemplate for the Normal and Edit modes, But once i change the ContentTemplate on the ContentPresenter I am loosing the event bubbleup from the button’s withing the DataTempaltes (meaning that the button clicks have no action anymore).

Here is the code:

<UserControl.Resources>

    <DataTemplate x:Key="NormalDT">
        <StackPanel>
            <TextBlock Text="{Binding Property1}"/>
            <CheckBox IsChecked="{Binding Property2, Mode=TwoWay}"/>
            <Button Content="Test" Click="Button_Click" />
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="EditDT">
        <StackPanel>
            <TextBox Text="{Binding Property1}"/>
            <CheckBox IsChecked="{Binding Property2, Mode=TwoWay}"/>
            <Button Content="Test" Click="Button_Click" />
        </StackPanel>
    </DataTemplate>
    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
        <Setter Property="Padding" Value="3"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="contentPresenterEdit">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="contentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                        <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                        <ContentPresenter x:Name="contentPresenter" 
                                          ContentTemplate="{StaticResource NormalDT}" 
                                          Content="{TemplateBinding Content}" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          Margin="{TemplateBinding Padding}"/>

                        <ContentPresenter x:Name="contentPresenterEdit" 
                                          ContentTemplate="{StaticResource EditDT}" 
                                          Content="{TemplateBinding Content}" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          Margin="{TemplateBinding Padding}" Visibility="Collapsed"/>
                        <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    <ListBox Height="263" Margin="33,54,366,0" VerticalAlignment="Top" ItemTemplate="{StaticResource NormalDT}" ItemsSource="{Binding Collection}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}"/>

</Grid>

Any idea on how I can get the button_click event working in my situation?

Any help is greatly appreciated!

Thanks.

Answer 1

For some reason that I don’t know, the Visibility animation defined in your focus visual state is causing this issue.

Try animating Opacity instead and it should work.

UPDATE

Actually, your code does work in WPF. I think it is a bug in Silverlight. If you attach a MouseLeftButtonDown event to a TextBlock it actually will fire, however it’s not the same case for Buttons and CheckBoxes.

Then I suspect it could be this but I am not 100% sure…

Prior to Silverlight 5, ButtonBase does not change the visual state
when Visibility is set to Collapsed, so when the control is visible
again, it stays in the visual state before it is made invisible.