delete button appear

Eduardo Gomez Romero 705 Reputation points
2024-10-18T12:38:20.84+00:00

I have a pointercommead, that make a label appear when I enter a contain area

  <Grid
      BackgroundColor="AliceBlue"
      ColumnDefinitions="*">
      <controls:TurbineData
          Grid.ColumnSpan="2"
          TurbineAddres="{Binding Turbine.Address}"
          TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
          TurbineName="{Binding Turbine.Name}" />
      <Label
          Grid.RowSpan="3"
          Grid.Column="1"
          BackgroundColor="#C62B26"
          FontFamily="ma"
          FontSize="Medium"
          HorizontalOptions="End"
          HorizontalTextAlignment="End"
          IsVisible="{Binding IsDeleteButtonVisible, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
          Text="{x:Static constant:MaterialFonts.Delete}"
          TextColor="White"
          VerticalTextAlignment="Center">
          <Label.GestureRecognizers>
              <TapGestureRecognizer
                  Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                  CommandParameter="{Binding .}" />
          </Label.GestureRecognizers>
      </Label>
      <Grid.GestureRecognizers>
          <PointerGestureRecognizer PointerEnteredCommand="{Binding MouseEnterCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
          <PointerGestureRecognizer PointerExitedCommand="{Binding MouseLeaveCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
      </Grid.GestureRecognizers>
  </Grid>


       [RelayCommand]
       void MouseEnter() {

           IsDeleteButtonVisible = true;

       }

       [RelayCommand]
       void MouseLeave() {

           IsDeleteButtonVisible = false;

       }


User's image

What I want to do, is to make this appear only in the item hover

For example, in my mouse is inside the hitbox of the turbine 3, only the turbine 3, will have the delete buton

Explanation

https://reccloud.com/u/ze1vsun

HERE IS MY CUSTOM CONTROL FOR THE TURBINE

<ContentView
    x:Class="METROWIND.Controls.TurbineData"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="TurbineInfo">

    <VerticalStackLayout
        Padding="2"
        BindingContext="{x:Reference TurbineInfo}"
        Spacing="-10">

        <Label
            FontAttributes="Bold"
            Style="{x:StaticResource TurbineDataLabelStyleStyle}"
            Text="{Binding TurbineName}" />

        <Label
            Style="{x:StaticResource TurbineDataLabelStyleStyle}"
            Text="{Binding TurbineAddres}" />

        <Label
            Style="{x:StaticResource TurbineDataLabelStyleStyle}"
            Text="{Binding TurbineCreationDate}" />

        <Label
            Style="{x:StaticResource C02LabelStyle}"
            Text="112.2343 kg CO₂" />

    </VerticalStackLayout>


namespace METROWIND.Controls;
public partial class TurbineData : ContentView {
    public TurbineData() {
        InitializeComponent();
    }
    public static readonly BindableProperty TurbineNameProperty = BindableProperty.Create(
        nameof(TurbineName), typeof(string), typeof(TurbineData));
    public string TurbineName {
        get => (string)GetValue(TurbineNameProperty);
        set => SetValue(TurbineNameProperty, value);
    }
    public static readonly BindableProperty TurbineAddresProperty = BindableProperty.Create(
        nameof(TurbineAddres), typeof(string), typeof(TurbineData));
    public string TurbineAddres {
        get => (string)GetValue(TurbineAddresProperty);
        set => SetValue(TurbineAddresProperty, value);
    }
    public static readonly BindableProperty TurbineCreationDateProperty = BindableProperty.Create(
        nameof(TurbineCreationDate), typeof(string), typeof(TurbineData));
    public string TurbineCreationDate {
        get => (string)GetValue(TurbineCreationDateProperty);
        set => SetValue(TurbineCreationDateProperty, value);
    }
}
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,542 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.