列表视图数据模板wpf中项目之间的距离

Question

您好，我为列表视图创建了一个数据模板，现在我有 2 个问题
第一个 是当鼠标聚焦在按钮上时我的图像隐藏，您可以在下图中看到它。
problem 1 and 2 two 是项目之间的距离很高，我希望它们的距离只是一条线（见下图） see this image

这是我的数据模板：

 <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

鼠标使图片消失的问题是因为按钮的默认模板。当您将鼠标悬停时，它会产生蓝色效果。我认为它位于模板内部的边框中，因此它位于背景之上。如果您只想将图像放入其中，可以 re-template 按钮来避免这种情况。根据您的具体要求，您可能想要略有不同但大致如下：

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

您可以将整个模板设为一张图片。特别是如果你的图标是一种颜色，我建议使用路径并将你的图标定义为资源字典中的几何图形。就像这封信： https://social.technet.microsoft.com/wiki/contents/articles/32610.wpf-layout-lab.aspx

你的项目之间的差距。默认的 itemcontainer 样式中有填充。您可以再次通过更改模板来避免这种情况：

    <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>

我注意到您的 TextBlock 上也设置了边距，我会暂时更改它，看看这是否也是问题的一部分。

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

为了探索这类问题，我发现 Snoop 是无价的。免费。一旦安装运行它就在你的应用程序之后。将视线 + 事物之一拖到运行ning window 上。将鼠标悬停在 UI 的可疑片段上。按 Ctrl+Shift，它将向您显示其中的所有控件及其属性。您可以更改 window 中的值并探索更改会立即产生什么影响。

列表视图数据模板wpf中项目之间的距离

distance between items in listview datatemplate wpf

c#

wpf

datatemplate