ListView DataTemplate WPF中项目之间的距离

Question

hi i created a datatemplate for listview now i have 2 problem
first is when mouse focus on button my image hide you can see it on below image.
problem 1 and 2 two is The distance between the items is tall and I want their distance being just one line (see below image) see this image

and this is my datatemplate:

 <DataTemplate>
    <Border  Background="#f0f4f7">
        <StackPanel Background="#f5f6fa" Margin="1,1,1,1" VerticalAlignment="Top">
            <Border Background="#edf0f5" BorderThickness="5">
                <Grid  Background="#ffffff" Height="30">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Background="#ffffff" Margin="5" Orientation="Horizontal">
                        <Button Height="20" Width="20" BorderBrush="Transparent" BorderThickness="0" Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.DeleteCommand}">
                            <Button.Background>
                                <ImageBrush ImageSource="..\Resources\Delete.png"/>
                            </Button.Background>
                        </Button>
                        <Button Height="20" Width="20" BorderBrush="Transparent" BorderThickness="0" Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.EditCommand}">
                            <Button.Background>
                                <ImageBrush ImageSource="..\Resources\Edit.png"/>
                            </Button.Background>
                        </Button>
                    </StackPanel>
                    <TextBlock Name="txtPhon" Foreground="#7c7f84" HorizontalAlignment="Right" Grid.Column="1" Text="{Binding Path=HomePhoneNumber}"
    Margin="0,5,5,5"/>
                </Grid>
            </Border>
        </StackPanel>


    </Border>
</DataTemplate>

Answer 1

The problem with mouse making the picture disappear is because of the default template to a button. When you mouseover it gives that blue effect. I think it's in a border which is inside the template so it's above the background. You can re-template the button to avoid that if you just want your image inside it. Depending on your exact requirements then you might want slightly different but roughly:

    <Button.Template>
        <ControlTemplate>
            <Border>
               <ContentPresenter />
            </Border>
        </ControlTemplate>
    </Button.Template>

You could make the whole template just an image. Particularly if your icons are one colour, I would recommend using a path and define your icons as geometries in a resource dictionary. Like the letter in this: https://social.technet.microsoft.com/wiki/contents/articles/32610.wpf-layout-lab.aspx

The gap between your items. There's padding in the default itemcontainer styling. You can avoid that by, again, changing the template something like:

    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <ContentPresenter/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>

I notice you also have a margin set on your TextBlock, I would temporarily change that and see if that's also part of the problem.

               <TextBlock Name="txtPhon" Foreground="#7c7f84" HorizontalAlignment="Right" Grid.Column="1" Text="{Binding Path=HomePhoneNumber}"
**Margin="0,0,5,0"/>**

In order to explore this sort of issue I find Snoop is invaluable. It's free. Once installed run it after your app. Drag one of the sight + things over your running window. Mouse over a suspect piece of UI. Press Ctrl+Shift and it'll show you all the controls in there and their properties. You can change values in the window and explore what effect the change would have immediately.