delete button appear

Eduardo Gomez Romero 845 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,596 questions
{count} votes

Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,011 Reputation points Microsoft Vendor
    2024-10-21T08:30:52.69+00:00

    Hello,

    The reason for the mouse to move to a project, the reason why all the delete buttons appear is that they bind the same Boolean value in viewmodel.

    IsVisible="{Binding IsDeleteButtonVisible, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
    

    If you need to show the button when the mouse is moved to an item, the Boolean value should be encapsulated into the Model class. For example, the following example class.

    public class SampleModel : INotifyPropertyChanged
    {
        public string name { get; set; }
        public bool Visible
        {
            get
            {
                return visible;
            }
            set
            {
                if (visible != value)
                {
                    visible = value;
                    OnPropertyChanged();
                }
            }
        }
        private bool visible;
        public event PropertyChangedEventHandler? PropertyChanged;
     
        public void OnPropertyChanged([CallerMemberName] string name = "") =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
    

    Then, necause the attributes of the control delete button display in the Model class, in the CollectionView, you can set your own binding for each entry.

    IsVisible="{Binding Visible}"
    

    Finally, you need to pass the item to ViewModel to the Item to perform visible modifications to ViewModel.

    <PointerGestureRecognizer 
        PointerEnteredCommandParameter="{Binding .}"
        PointerEnteredCommand="{Binding MouseEnterCommand, Source={x:RelativeSource AncestorType={x:Type c:MyViewModel}}}" />
    <PointerGestureRecognizer 
        PointerExitedCommandParameter="{Binding .}"
        PointerExitedCommand="{Binding MouseLeaveCommand, Source={x:RelativeSource AncestorType={x:Type c:MyViewModel}}}" />
    

    In viewmodel:

    void MouseEnter(Object o)
    {
        var item = (SampleModel)o;
        if(item != null)
        {
            item.Visible = true;
        }   
    }
    void MouseLeave(Object o)
    {
        var item = (SampleModel)o;
        if (item != null)
        {
            item.Visible = false;
        }
    }
    

    Best Regards,

    Alec Liu.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful

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.