border color in custom control

Eduardo Gomez Romero 945 Reputation points
2024-11-22T15:39:37.2966667+00:00

I have a custom control

 <VerticalStackLayout BindingContext="{x:Binding Source={x:Reference ImageButton}}">
     <Border
         Margin="10"
         Padding="10"
         HorizontalOptions="Start"
         Stroke="{x:Binding BorderColor}"
         StrokeThickness="2">
         <Label
             FontFamily="fa"
             FontSize="Large"
             Text="{x:Binding ImageName}"
             TextColor="Black"
             VerticalOptions="Center" />
         <Border.GestureRecognizers>
             <TapGestureRecognizer
                 Command="{x:Binding ClickCommand}"
                 CommandParameter="{x:Binding Parameters}" />
         </Border.GestureRecognizers>
     </Border>

     <Label
         HorizontalTextAlignment="Center"
         Text="{x:Binding Caption}"
         TextColor="Black" />

 </VerticalStackLayout>


public partial class CustomImageButton : ContentView
{
    public CustomImageButton()
    {
        InitializeComponent();
    }
    public static readonly BindableProperty ImageNameProperty = BindableProperty.Create(
        nameof(ImageName), typeof(ImageSource), typeof(CustomImageButton));
    public ImageSource ImageName
    {
        get => (ImageSource)GetValue(ImageNameProperty);
        set => SetValue(ImageNameProperty, value);
    }
    public static readonly BindableProperty CaptionProperty = BindableProperty.Create(
        nameof(Caption), typeof(string), typeof(CustomImageButton));
    public string Caption
    {
        get => (string)GetValue(CaptionProperty);
        set => SetValue(CaptionProperty, value);
    }
    public static readonly BindableProperty ClickCommandProperty = BindableProperty.Create(
        nameof(ClickCommand), typeof(ICommand), typeof(CustomImageButton));
    public ICommand ClickCommand
    {
        get => (ICommand)GetValue(ClickCommandProperty);
        set => SetValue(ClickCommandProperty, value);
    }
    public static readonly BindableProperty ParametersProperty = BindableProperty.Create(
        nameof(Parameters), typeof(int), typeof(CustomImageButton));
    public int Parameters
    {
        get => (int)GetValue(ParametersProperty);
        set => SetValue(ParametersProperty, value);
    }
    public static readonly BindableProperty BorderColorProperty = BindableProperty.Create(
        nameof(BorderColor), typeof(Brush), typeof(CustomImageButton));
    public Brush BorderColor
    {
        get => (Brush)GetValue(BorderColorProperty);
        set => SetValue(BorderColorProperty, value);
    }
}

I am using this control here

popup:SfPopup
            IsOpen="{x:Binding IsOptionsOpen}"
            RelativeView="{x:Binding Source={x:Reference mapLayers}}"
            Style="{x:StaticResource ChargeStationPopupStyle}">
            <popup:SfPopup.PopupStyle>
                <popup:PopupStyle CornerRadius="8" />
            </popup:SfPopup.PopupStyle>
            <popup:SfPopup.ContentTemplate>
                <DataTemplate>
                    <VerticalStackLayout Spacing="10">
                        <controls:CustomImageButton
                            BorderColor="{x:Binding BorderColor}"
                            Caption="{x:Static rex:AppResource.Default}"
                            ClickCommand="{x:Binding ChangeMapTypeCommand}"
                            ImageName="{x:Static constant:FontAwesome.Road}"
                            Parameters="0" />
                        <controls:CustomImageButton
                            BorderColor="{x:Binding BorderColor}"
                            Caption="{x:Static rex:AppResource.Satelite}"
                            ClickCommand="{x:Binding ChangeMapTypeCommand}"
                            ImageName="{x:Static constant:FontAwesome.StreetView}"
                            Parameters="2" />
                    </VerticalStackLayout>


I am trying to change the color, when I tap on it (Only change the one that is tap). and when I click on the other one, the other one should return to the normal border color

    [ObservableProperty]
    Brush borderColor = Colors.Black;

    private Map? MapView;

    [ObservableProperty]
    bool isOptionsOpen;

    [ObservableProperty]
    bool isExpanded;

    [RelayCommand]
    private void Appearing(Map map)
    {

        MapView = map;
    }

    [RelayCommand]
    void ItemSelected(Turbine Turbine)
    {

        var mapSpan = MapSpan.FromCenterAndRadius(Turbine.Location,
            Distance.FromKilometers(0.4));

        MapView!.MoveToRegion(mapSpan);
        IsExpanded = false;
    }

    [RelayCommand]
    void OpenMenu()
    {
        IsOptionsOpen = true;
    }

    [RelayCommand]
    void ChangeMapType(int mapType)
    {
        MapView!.MapType = mapType switch
        {
            0 => MapType.Street,
            1 => MapType.Satellite,
            2 => MapType.Hybrid, // Example: Handle mapType 2
            _ => throw new ArgumentOutOfRangeException(nameof(mapType), mapType, "Invalid map type"),
        };
        IsOptionsOpen = false;
    }
}

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,657 questions
0 comments No comments
{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.