Question

我正在创建图库，它包含图片。所以我想使用关闭按钮从图库中删除图像。关闭按钮的位置应该是每个图像的一角。如何创建这样的角落按钮样式？有什么想法吗？

<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <StackPanel Width="120">
                <Button Height="25" VerticalAlignment="Top" Content="Show" Width="100" Margin="5" />
                <Image Height="90" Source="{Binding Path=Thumbnail}" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
                <TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" Text="{Binding Path=Name}" >
                    <TextBlock.ToolTip>
                        <ToolTip Visibility="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget, Converter={StaticResource trimmedVisibilityConverter}}">
                            <ToolTip.Content>
                                <TextBlock Text="{Binding Name}"/>
                            </ToolTip.Content>
                        </ToolTip>
                    </TextBlock.ToolTip>
                </TextBlock>
            </StackPanel>
            <!--<Separator Width="5" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="Transparent"/>-->
        </StackPanel>

    </DataTemplate>
</ListBox.ItemTemplate>

Answer 1

将图像和按钮放在同一个网格中。将按钮对齐到右上角，并在图像的顶部和右侧添加边距，使按钮移出图像边框

<Grid>
  <Image Margin="0,8,8,0"/>
  <Button HorizontalAlignment="Right" VerticalAlignment="Top" 
          Width="16" Height="16" Content="x"/>
</Grid>

Answer 2

这是我的一个样本中的圆形按钮，看起来非常类似于您之后的内容。
颜色和鼠标悬停可能不同。

<SolidColorBrush x:Key="DarkLight" Color="Chocolate"/>
<SolidColorBrush x:Key="BrightMid" Color="PapayaWhip"/>
<Geometry x:Key="CloseIcon">
    M19.85228,12.08996L12.093,19.849201 24.242323,31.997846 12.094,44.145998 19.852051,51.904958 32.001186,39.756277 44.150543,51.904958 51.909,44.145994 39.760246,31.997501 51.909,19.849201 44.15049,12.08996 32.001431,24.238849z M32,0C49.671021,3.1599484E-07 64,14.329407 64,31.998501 64,49.677606 49.671021,63.997003 32,63.997003 14.328003,63.997003 0,49.677606 0,31.998501 0,14.329407 14.328003,3.1599484E-07 32,0z
</Geometry>
<Style x:Key="CloseButton" TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="{StaticResource BrightMid}"/>
    <Setter Property="Background" Value="{StaticResource DarkLight}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate> 
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="Red"/>
                        <Setter Property="Background" Value="White"/>
                    </Trigger>
                </ControlTemplate.Triggers>
                <Border  CornerRadius="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" 
                         Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}" 
                         Name="border"
                         BorderThickness="1"
                         BorderBrush="Black"
                         Background="{Binding Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
                          >
                    <Path Data="{StaticResource CloseIcon}"  Stretch="Fill"
                          Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
                          />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在图象的角落的圆的接近的按钮

2 个答案: