Search code examples
c#xamarinxamarin.formsborderpicker

add border to a picker that is only visible when focused?


Is there a way to add a border to a picker that is only visible when focused? Im not sure if Im explaining myself, but like I only want the border to be visible when the user tries to choose an item from the picker. Im working on xamarin forms. This is my code. Thank You in advance

    <StackLayout Orientation="Horizontal">
        <Label  VerticalOptions="Start" HorizontalOptions="StartAndExpand"
                Text="Project"
                WidthRequest="100"/>
        <Picker Title="Please Select" HorizontalOptions="StartAndExpand" WidthRequest="255">
            <Picker.Items>
                <x:String>Andalucia</x:String>
                <x:String>Atlantico</x:String>
                <x:String>Berkley Square</x:String>
                <x:String>Cooper City</x:String>
                <x:String>Valencia Bay</x:String>
            </Picker.Items>
            <Picker.Triggers>
                <Trigger TargetType="Picker"
                             Property="IsFocused" Value="True">
                    <Setter Property="BackgroundColor" Value="Azure">
                    </Setter>
                </Trigger>
            </Picker.Triggers>

        </Picker>
    </StackLayout>

Solution

  • Including your Picker inside a Frame (or another control that best fit your needs) might work.

    <StackLayout Orientation="Horizontal" VerticalOptions="Center">
        <Label  VerticalOptions="Start"
                HorizontalOptions="StartAndExpand"
                Text="Project"
                WidthRequest="100"/>
        <Frame OutlineColor="Transparent" 
               HorizontalOptions="StartAndExpand" 
               WidthRequest="255" 
               Padding="2">
            <Frame.Triggers>
                <Trigger TargetType="Frame" Property="IsFocused" Value="True">
                    <Setter Property="OutlineColor" Value="Red" />
                </Trigger>
            </Frame.Triggers>
    
            <Picker Title="Please Select">
                <Picker.Items>
                    <x:String>Andalucia</x:String>
                    <x:String>Atlantico</x:String>
                    <x:String>Berkley Square</x:String>
                    <x:String>Cooper City</x:String>
                    <x:String>Valencia Bay</x:String>
                </Picker.Items>
                <Picker.Triggers>
                    <Trigger TargetType="Picker" Property="IsFocused" Value="True">
                        <Setter Property="BackgroundColor" Value="Blue" />
                    </Trigger>
                </Picker.Triggers>
            </Picker>
        </Frame>
    </StackLayout>