How to modify the RadListPicker control as box with rounder corners and with dropdown up and down arrow when it is closed or open.

[Mohammed Rameez]

Hi Telerik,

 

How to modify the RadListPicker control as box with rounder corners and with dropdown up and down arrow when it is closed or open.

 

I need this for all the platforms.

 

Should look like this in all the platforms:

Thanks And Best Regards,

Mohammed Rameez Raza (Rameez).

[Didi]

Hi Mohammed,

You can add a border around the picker by using the 

BorderColor—Defines the border color of the picker.
BorderThickness—Specifies the border thickness of the picker. The default value is new Thickness(0,0,0,1).

properties of the ListPicker. More details can be found here: https://docs.telerik.com/devtools/maui/controls/listpicker/styling/styling 

Regarding to the drop-down indicator, it is actually the Toggle button. There is a ToggleButtonStyle, so you can subscribe to ListPicker.PropertyChanged and if the IsOpen is true apply toggle style with different icon, if IsOpen is false, apply other style. Here is an example:

	<ContentPage.Resources>
		<ResourceDictionary>
			<Style x:Key="toggleButtonStyle" TargetType="Button">
				<Setter Property="Text" Value="&#xE812;" />
				<Setter Property="Padding" Value="0" />
				<Setter Property="WidthRequest" Value="30" />
				<Setter Property="HeightRequest" Value="30" />
				<Setter Property="BorderWidth" Value="1" />
				<Setter Property="BorderColor" Value="Red" />
				<Setter Property="BackgroundColor" Value="Transparent" />
				<Setter Property="VerticalOptions" Value="Center" />
				<Setter Property="FontFamily" Value="TelerikFont" />
				<Setter Property="FontSize" Value="14" />
				<Setter Property="VisualStateManager.VisualStateGroups">
					<VisualStateGroupList>
						<VisualStateGroup x:Name="CommonStates">
							<VisualState x:Name="Normal" />
						</VisualStateGroup>
					</VisualStateGroupList>
				</Setter>
			</Style>

			<Style x:Key="toggleButtonStyleToggled" TargetType="Button">
				<Setter Property="Text" Value="^" />
				<Setter Property="Padding" Value="0" />
				<Setter Property="WidthRequest" Value="30" />
				<Setter Property="HeightRequest" Value="30" />
				<Setter Property="BorderWidth" Value="1" />
				<Setter Property="BorderColor" Value="Blue" />
				<Setter Property="BackgroundColor" Value="Transparent" />
				<Setter Property="VerticalOptions" Value="Center" />
				<Setter Property="FontFamily" Value="TelerikFont" />
				<Setter Property="FontSize" Value="14" />
				<Setter Property="VisualStateManager.VisualStateGroups">
					<VisualStateGroupList>
						<VisualStateGroup x:Name="CommonStates">
							<VisualState x:Name="Normal" />
						</VisualStateGroup>
					</VisualStateGroupList>
				</Setter>
			</Style>
		</ResourceDictionary>
	</ContentPage.Resources>
	
	<telerik:RadListPicker BorderColor="#8660C5" BorderThickness="2"
                       Placeholder="Pick a City Name!" x:Name="picker"
						   PropertyChanged="RadListPicker_PropertyChanged"
                       ItemsSource="{Binding Items}"
                       DisplayMemberPath="Name" PickerMode="DropDown"
                       DisplayStringFormat="You have picked: {0}"
                       ToggleButtonStyle="{StaticResource toggleButtonStyle}"
                       IsToggleButtonVisible="True">
		<telerik:RadListPicker.DropDownSettings>
			<telerik:PickerDropDownSettings  />
		</telerik:RadListPicker.DropDownSettings>
	</telerik:RadListPicker>

and the handler in code-behind:

	private void RadListPicker_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
	{
		if (e.PropertyName == "IsOpen" && this.picker.IsOpen == true) {

			this.picker.ToggleButtonStyle = this.Resources["toggleButtonStyleToggled"] as Style;

		}
		else if (e.PropertyName == "IsOpen" && this.picker.IsOpen == false)
		{
			this.picker.ToggleButtonStyle = this.Resources["toggleButtonStyle"] as Style;
		}
	}

Hope this helps.

Regards,
Didi
Progress Telerik

[Mohammed Rameez]

Hi Didi,

Thanks for the reply.

I tried the exact way but nothing from the style gets applied on the picker.

 

Thanks.

[Didi]

Hi,
Please send a sample where the style does not apply. Then I can research this further.