border color in custom control

Question

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

Answer 1

Hello,

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

You need to create two BorderColor properties for these two CustomImageButtons in your ViewModel. When ChangeMapType Command is executed, change the colors for two CustomImageButtons.

Here is my code, you can refer to it.

       [ObservableProperty]
        Brush borderColor = Colors.Black;
 
        [ObservableProperty]
        Brush borderColor2 = Colors.Black;


private void ChangeMapType(object res)
{
    string result = res.ToString();
     if (!string.IsNullOrEmpty(result))
     {
         if (result.Equals("0"))
         {
             BorderColor = Colors.Red;
             BorderColor2 = Colors.Black;
         }
         else if (result.Equals("2"))
         {
             BorderColor2 = Colors.Red;
             BorderColor = Colors.Black;
         }
     }
}

Best Regards,

Leon Lu

---

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.