Round close button in corner of image

Question

I am creating gallery, it contains images. So I want to remove the images from gallery using close buttons. The position of the close button should be the corner of the every images. How can I create like this corner buttons styles? Any idea?

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

score 2 · Accepted Answer · answered May 04 '18 at 10:40

2

place Image and Button in the same Grid. Align button to top right corner, and add margin to top and right sides of image, so the button goes outside image borders

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

answered May 04 '18 at 10:40

ASh

34,632
9
60
82

Great !!...It's working, one more help please, how can I make these button in circular shape? – Jinesh May 04 '18 at 10:46
@Jinesh, to make button in circular shape, change its template. examples here: https://stackoverflow.com/questions/6745663/how-to-create-make-rounded-corner-buttons-in-wpf – ASh May 04 '18 at 11:02

score 2 · Answer 2 · answered May 04 '18 at 11:02

Here's a round button from one of my samples which looks pretty similar to what you're after.
The colours and mouseover may be different.

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

Round close button in corner of image

2 Answers2