0

I'm using CardView of WPF, add MouseDoubleClick handler to handle item click event, but the problem is when I click the empty space: the area out of the card, it will invoke the event also, this is not what I want, so I want to detect the click event is not on card item, or just disable this event to invoke the double click handler.

<dxg:CardView ShowTotalSummary="False" ShowGroupPanel="False" SeparatorThickness="0" ShowFilterPanelMode="Never" FilterEditorShowOperandTypeIcon="False" 
                             CardLayout="Rows"  MaxCardCountInRow="5" ShowCardExpandButton="False" ShowGroupedColumns="False"
                             MouseDoubleClick="cvPros_MouseDoubleClick">
</dxg:CardView>

enter image description here

I saw some questions like mine, but its target is ListView or TreeView, an item of CardView doesn't have the corresponding class, like ListBoxItem,TreeViewItem:

WPF; How to Deselect all my selected items when clicking on empty space in my ListView

WPF Treeview how to handle mouse clicks in F Treeview but not on a treeviewitem?

so i can't use the solution as this, anyone can tell me how to solve this problem, thanks!

gorkem
  • 731
  • 1
  • 10
  • 17
starkshang
  • 8,228
  • 6
  • 41
  • 52

1 Answers1

1

The issue you're having is that you're adding your MouseDoubleClick event to the whole CardView but as it has a margin that is triggering the MouseDoubleClick event too.

To solve your problem you need to apply the MouseDoubleClick event to the portion of the CardView that you're interested in. Without access to the source code one way you can do this is to remove the margin, apply your MouseDoubleClick event to the CardView and then add a margin afterwards if that's what you want. This post suggests removing the margin like this

Redefine the CardTemplate

<dxg:CardView.CardTemplate>
    <DataTemplate>
        <Border Margin="-11">
            <TextBlock Background="Red" Height="50" Width="50"/>
        </Border>
    </DataTemplate>
</dxg:CardView.CardTemplate>

Redefine the x:Key="{dxgt:GridCardThemeKey ResourceKey=ContentPresenterStyle}"

<Style x:Key="{dxgt:GridCardThemeKey ResourceKey=ContentPresenterStyle, IsThemeIndependent=True}" TargetType="{x:Type dxg:GridCardContentPresenter}">
    <Setter Property="Margin" Value="0" />
</Style>

You could then use your CardView like this

<CardView MouseDoubleClick="MyMouseDoubleClick" Margin="10">

Alternatively you could nest it all in a new UserControl like this

<UserControl>
    <Grid Margin="10" >
        <CardView MouseDoubleClick="MyMouseDoubleClick" Margin="10">
    </Grid>
</UserControl>

Then you could use it like this

<MyCardView .../>
Gareth
  • 913
  • 6
  • 14
  • I think the problem is not only the fault of the margin.Consider this case: First row has 4 card items, and the second row has 1 card items, if we click the second row, even not click on the only one card item, it will invoke the double click also, this problem can't be solved by your solution. so i want to know whether there is a solution that can only execure the click event when i click the card view item, not margin, not any other empty space. – starkshang Jun 18 '17 at 04:32