Click here to Skip to main content
15,064,915 members
Please Sign up or sign in to vote.
3.50/5 (2 votes)
See more:
Hi,
i'm using a groupstyle on a listbox. i've used a datatemplate and populated the listbox with controls.. the controls are now grouped.. i want to show-hide the "buttons"( in the control) of a particular group of items, when the mouse is over a particular group.





<listbox itemcontainerstyle="{StaticResource SimpleListBoxItem}" itemtemplate="{DynamicResource ExecutionComponentTemplate}" alternationcount="2" borderthickness="0">
            <listbox.groupstyle>
                <groupstyle containerstyle="{StaticResource ContainerStyle}" headertemplate="{StaticResource groupingHeaderTemplate}">                
                </groupstyle>
            </listbox.groupstyle> 
        </listbox>



ExecutionComponentTemplate is the datatemplate which contains the control with the buttons which i want to show/hide on mouse over...

ExecutionComponentTemplate looks like this:
XML
<DataTemplate x:Key="ExecutionComponentTemplate" >
                <c:ExecutionControl  ></c:ExecutionControl>
            </DataTemplate>



How do i access the buttons which are inside the ExecutionControl :)


please help!!
thanks in advance.
Posted
Updated 16-Jun-11 23:04pm
v5

1 solution

Next example shows grouped items when your mouse is over the group, hope this is what you requested:

XML
<Grid>
    <Grid.Resources>
        <XmlDataProvider x:Key="Company" XPath="/Company">
            <x:XData>
                <Company xmlns="">
                    <Person Name="Jack" Role="CEO"/>
                    <Person Name="Tim" Role="PL" />
                    <Person Name="Jil" Role="PL" />
                    <Person Name="Jimmy" Role="PM" />
                    <Person Name="Joy" Role="PM" />
                    <Person Name="Jim" Role="PL" />
                    <Person Name="Jack" Role="PM" />
                </Company>
            </x:XData>
        </XmlDataProvider>

        <DataTemplate x:Key="categoryTemplate">
            <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Background="Gray" Margin="0,5,0,0"/>
        </DataTemplate>

        <DataTemplate x:Key="template">
            <TextBlock Text="{Binding XPath=@Name}"/>
        </DataTemplate>

        <Style x:Key="ContainerStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Margin" Value="0,0,0,5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <StackPanel x:Name="Container">
                            <ContentPresenter Grid.Row="0"
                                Content="{TemplateBinding ContentControl.Content}"
                                ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" />
                            <ItemsPresenter x:Name="Items" Grid.Row="1"
                                Visibility="Collapsed"
                                Margin="5,0,0,0" />
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" SourceName="Container" Value="True">
                                <Setter TargetName="Items" Property="Visibility" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <CollectionViewSource x:Key="cvs" Source="{Binding Source={StaticResource Company},XPath=Person}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="@Role"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </Grid.Resources>


    <ListBox Name="lst"  ItemTemplate="{StaticResource template}" ItemsSource="{Binding Source={StaticResource cvs}}">
        <ListBox.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource categoryTemplate}" ContainerStyle="{StaticResource ContainerStyle}" />
        </ListBox.GroupStyle>
    </ListBox>
</Grid>


Added after question modified:
Just use right binding / property in triggers, know you visual tree & expected result.
Next code will show buttons when you mouse is over the groupitem

XML
<Grid>
       <Grid.Resources>
           <XmlDataProvider x:Key="Company" XPath="/Company">
               <x:XData>
                   <Company xmlns="">
                       <Person Name="Jack" Role="CEO"/>
                       <Person Name="Tim" Role="PL" />
                       <Person Name="Jil" Role="PL" />
                       <Person Name="Jimmy" Role="PM" />
                       <Person Name="Joy" Role="PM" />
                       <Person Name="Jim" Role="PL" />
                       <Person Name="Jack" Role="PM" />
                   </Company>
               </x:XData>
           </XmlDataProvider>

           <DataTemplate x:Key="categoryTemplate">
               <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Background="Gray" Margin="0,5,0,0"/>
           </DataTemplate>

           <DataTemplate x:Key="template">
               <StackPanel>
                   <TextBlock Text="{Binding XPath=@Name}"/>
                   <Button x:Name="Button" Content="Button" Visibility="Hidden"/>
               </StackPanel>
               <DataTemplate.Triggers>
                   <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type GroupItem}}}" Value="true">
                       <Setter Property="Visibility" Value="Visible" TargetName="Button"/>
                   </DataTrigger>
               </DataTemplate.Triggers>
           </DataTemplate>

           <CollectionViewSource x:Key="cvs" Source="{Binding Source={StaticResource Company},XPath=Person}">
               <CollectionViewSource.GroupDescriptions>
                   <PropertyGroupDescription PropertyName="@Role"/>
               </CollectionViewSource.GroupDescriptions>
           </CollectionViewSource>
       </Grid.Resources>


       <ListBox Name="lst"  ItemTemplate="{StaticResource template}" ItemsSource="{Binding Source={StaticResource cvs}}">
           <ListBox.GroupStyle>
               <GroupStyle HeaderTemplate="{StaticResource categoryTemplate}" />
           </ListBox.GroupStyle>
       </ListBox>
   </Grid>


Answer for question v5:
If problem still doesnt solved, there is some tips for you:
-Add some property to ExecutionControl, indicating buttons visibility, IsButtonsVisible for example...
-Bind inner buttons visibility to that property, use ValueConverters if needed (bool to visibility, etc)
-Modify your ExecutionComponentTemplate datatemplate, set IsButtonsVisible property to false by default
-Modify trigger in ExecutionComponentTemplate, change setter in trigger to set IsButtonsVisible to true when parent GroupItem IsMouseOver is true.
   
v3
Comments
tomgeo19 17-Jun-11 8:02am
   
Thanks a ton!! :) That is exactly what i did

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900