Xamarin.Forms ControlTemplate binding fails after control first drawn - xaml

I have a ControlTemplate to modify the appearance of a radioButton in Xamarin.Forms.
I borrowed/updated it from https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton#redefine-radiobutton-appearance
It looks great, and the appearance is perfect when the page is created.
I want the image in the radiobutton to change depending on a binding, which it does not do.
The binding property gets modified, OnPropertyChanged() gets called, but the binding is not getting triggered.
Here is the general appearance (with two of these RadioButtons side by side)
Again, the appearance and the Converter and everything work just fine, but only when the page is first drawn.
Here is the ControlTemplate
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame
BackgroundColor="#30888888"
HasShadow="False"
HeightRequest="{TemplateBinding HeightRequest}"
WidthRequest="{TemplateBinding WidthRequest}"
HorizontalOptions="Start"
VerticalOptions="StartAndExpand"
Padding="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BorderColor" Value="Accent" />
<Setter TargetName="check"
Property="Opacity"
Value="1" />
<Setter TargetName="checkrim"
Property="Opacity"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{DynamicResource TransparentBackgroundColour}" />
<Setter Property="BorderColor" Value="Transparent" />
<Setter TargetName="check"
Property="Opacity"
Value="0" />
<Setter TargetName="checkrim"
Property="Opacity"
Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid Margin="4"
WidthRequest="100">
<ContentPresenter Margin="6" />
<Grid WidthRequest="20"
HeightRequest="20"
Padding="0"
HorizontalOptions="Start"
VerticalOptions="Start">
<Ellipse x:Name="unckecd"
Stroke="White"
StrokeThickness="2"
Fill="Transparent"
Margin="0"
WidthRequest="20" HeightRequest="20"
HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="checkrim"
Stroke="Accent"
StrokeThickness="2"
Fill="Transparent"
Margin="0"
WidthRequest="20" HeightRequest="20"
HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check"
Fill="Accent"
Margin="1,1,0,0"
WidthRequest="10" HeightRequest="10"
HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</Grid>
</Frame>
</ControlTemplate>
And the Style of my RadioButton
<Style x:Key="FancyRadioButton" TargetType="RadioButton">
<Setter Property="ControlTemplate"
Value="{DynamicResource RadioButtonTemplate}" />
</Style>
And my RadioButton
<RadioButton Style="{StaticResource FancyRadioButton}"
Value="{x:Static gdl90Types:UdpTransmitMode.UdpUnicast}"
WidthRequest="150"
HeightRequest="103">
<RadioButton.Content>
<StackLayout VerticalOptions="Start" Spacing="0" Margin="0, -3">
<Image Source="{Binding Source=ColourPresetSetting,
ConverterParameter=unicast,
Converter={StaticResource ResourceImageFromThemeConverter}}"
Margin="22,0"
Aspect="AspectFit"
/>
<Label Text="UDP UNICAST" TextColor="{DynamicResource MediumContrastTextColour}" />
</StackLayout>
</RadioButton.Content>
All I want is for the Image in the RadioButton to notice the property ColourPresetSetting changing, to update the image.
It does it when first drawn, but no longer after that.
Am I missing something obvious?

Related

Issues with styling a radio button in .Net MAUI

I am running into some issues with styling a radio button in .Net MAUI. Initially, I noticed the the radio button look-and-feel is not consistent across Windows and Android, as can be seen in the image below:
Not only are they different, but the available options for styling the button are limited. The only options for defining colors are "BorderColor", "BackgroundColor", and "TextColor". Both "BorderColor" and "BackgroundColor" have absolutely no effect on the color of the radio button itself. I'd like to change the color of the actual radio button.
So I decided to create a control template to help me out. Here is my control template:
<ControlTemplate x:Key="RadioButtonTemplate">
<Border Stroke="Transparent" BackgroundColor="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid WidthRequest="20" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
<Ellipse x:Name="border_circle" StrokeThickness="2" Stroke="DarkBlue" Fill="White" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="DarkBlue" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<ContentPresenter Margin="10,0,0,0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="RadioButton" x:Key="RadioButtonStyle">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>
This worked reasonably well, so now I get the following look-and-feel on both Android and Windows:
Now I have one last problem. When I was using the default radio buttons (without my control template), they would reliably turn a "light gray" color whenever I set IsEnabled to false. I'd like to make it so that I can disable my radio button and have it turn a light gray color (to indicate that it is disabled) while still using my control template so I have a unified look-and-feel.
So I attempted to add a Disabled visual state to my control template, but it doesn't seem to be working. Here is my new control template with a Disabled state:
<ControlTemplate x:Key="RadioButtonTemplate">
<Border Stroke="Transparent" BackgroundColor="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter TargetName="border_circle" Property="Stroke" Value="LightGray" />
<Setter TargetName="check" Property="Fill" Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid WidthRequest="20" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
<Ellipse x:Name="border_circle" StrokeThickness="2" Stroke="DarkBlue" Fill="White" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="DarkBlue" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<ContentPresenter Margin="10,0,0,0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="RadioButton" x:Key="RadioButtonStyle">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>
Unfortunately, it's not working. Not only does the color not change when the radio button is disabled, but also my 2nd setter (setting the "Fill" property of the "check" object) causes a compile-time error as well ("Cannot resolve property Fill on type Border").
Any suggestions?
I was able to figure out a way to do what I needed to do. Rather than use the "Disabled" visual state in the visual state group, I was able to use style triggers. So now my control template and its corresponding style look like this:
<ControlTemplate x:Key="RadioButtonTemplate">
<Border Stroke="Transparent" BackgroundColor="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid WidthRequest="20" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
<Ellipse x:Name="border_circle" StrokeThickness="2" Stroke="{TemplateBinding BorderColor}" Fill="White" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="{TemplateBinding BorderColor}" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<ContentPresenter Margin="10,0,0,0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="RadioButton" x:Key="RadioButtonStyle">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
<Style.Triggers>
<Trigger TargetType="RadioButton" Property="IsEnabled" Value="False">
<Setter Property="BorderColor" Value="LightGray" />
</Trigger>
<Trigger TargetType="RadioButton" Property="IsEnabled" Value="True">
<Setter Property="BorderColor" Value="DarkBlue" />
</Trigger>
</Style.Triggers>
</Style>

.Net maui radio button checked changed event not firing with control template

I am using radio button control with customised radio button selection colors in .Net Maui.But when changing the selection , it doesn't fire CheckedChanged event.
Here is the code snippet,
View
<StackLayout
x:Name="SexRadioGroup"
Grid.Row="10"
Margin="24,12,0,0"
Orientation="Horizontal"
RadioButtonGroup.GroupName="SexRadioGroup"
Spacing="40">
<RadioButton
GroupName="SexRadioGroup"
IsChecked="True"
Value="Male">
<RadioButton.Content>
<StackLayout>
<Label
Margin="30,0,0,0"
Text="Male"
TextColor="{StaticResource FieldNameTextColor}"
VerticalOptions="Start" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
<RadioButton
CheckedChanged="SexRadioButton_CheckedChanged"
GroupName="SexRadioGroup"
Value="Female">
<RadioButton.Content>
<StackLayout>
<Label
Margin="30,0,0,0"
Text="Female"
TextColor="{StaticResource FieldNameTextColor}"
VerticalOptions="Start" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
</StackLayout>
Code behind file
private void SexRadioButton_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
}
Style(RadioButton template)
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame
Padding="0"
BackgroundColor="#F3F2F1"
BorderColor="#F3F2F1"
HasShadow="False"
HeightRequest="100"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="100">
<Grid Margin="4" WidthRequest="100">
<Grid
HeightRequest="18"
HorizontalOptions="End"
VerticalOptions="Start"
WidthRequest="18">
<Ellipse
Fill="White"
HeightRequest="16"
HorizontalOptions="Center"
Stroke="Blue"
VerticalOptions="Center"
WidthRequest="16" />
<Ellipse
x:Name="check"
Fill="Blue"
HeightRequest="8"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="8" />
</Grid>
<ContentPresenter />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BorderColor" Value="#FF3300" />
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#F3F2F1" />
<Setter Property="BorderColor" Value="#F3F2F1" />
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</Frame>
</ControlTemplate>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>
Is there any way to use renderer to change the selection and unselection color of the radio button by renderers?
The cause is the clicked event has been dealt with by the Frame, not the radio button. So you can add the TapGestureRecognizer to the Frame. I use the control template in the App.xaml. Such as:
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame
Padding="0"
BackgroundColor="#F3F2F1"
BorderColor="#F3F2F1"
HasShadow="False"
HeightRequest="100"
HorizontalOptions="Start"
VerticalOptions="Start"
WidthRequest="100">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Frame.GestureRecognizers>
And in the App.cs:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
      {
            Frame frame = sender as Frame;
            RadioButton button = (RadioButton)frame.Parent;
            button.IsChecked = true;
}
And then, the radio button checked changed event will be hit when you click it. (Note: On the windows platform, it can work without the TapGestureRecognizer.)

RadioButton unaligned with UI in XAML

Below image you see the red circle indicators where it's only possible to click and radiobutton works, but I want to scoop them to the correct place(to the left so it's aligned with UI), which I don't know how. I tried TranslationY=-80 but it didn't work.
Styles.xaml:
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame BorderColor="#F3F2F1" CornerRadius="2" BackgroundColor="#F3F2F1" HasShadow="False" HeightRequest="80" WidthRequest="80" HorizontalOptions="Start" VerticalOptions="Start" Padding="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BorderColor" Value="#FF3300" />
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#F3F2F1" />
<Setter Property="BorderColor" Value="#F3F2F1" />
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid Margin="4" WidthRequest="80">
<Grid WidthRequest="18" HeightRequest="18" HorizontalOptions="End" VerticalOptions="Start">
<Ellipse Stroke="Blue" Fill="White" WidthRequest="16" HeightRequest="16" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="Blue" WidthRequest="8" HeightRequest="8" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<ContentPresenter />
</Grid>
</Frame>
</ControlTemplate>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>
MyPage.xaml:
<StackLayout Spacing="3">
<Label Text="{Binding SelectedTheme, StringFormat='Theme: {0}'}" FontSize="20" />
<Grid ColumnDefinitions="*,*,*" RadioButtonGroup.GroupName="themes" RadioButtonGroup.SelectedValue="{Binding SelectedTheme, Mode=TwoWay}">
<RadioButton Value="{x:Static am:AppTheme.Unspecified}" CheckedChanged="RadioButton_CheckedChanged">
<RadioButton.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Gear}, Color=#323130}" />
<Label FontSize="Small" Text="System" TextColor="#323130" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="{x:Static am:AppTheme.Light}" Grid.Column="1" CheckedChanged="RadioButton_CheckedChanged">
<RadioButton.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Sun}, Color=#323130}" />
<Label FontSize="Small" Text="Light" TextColor="#323130" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="{x:Static am:AppTheme.Dark}" Grid.Column="2" CheckedChanged="RadioButton_CheckedChanged">
<RadioButton.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Moon}, Color=#323130}" />
<Label FontSize="Small" Text="Dark" TextColor="#323130" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
</Grid>
</StackLayout>
It's hard to say it is a potential issue or by design .
To solve the problem/as a workaround , you can add a TapGestureRecognizer on ContentPresenter to enable the RadioButton manually .
Sample code
//xaml
<ContentPresenter >
<ContentPresenter.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</ContentPresenter.GestureRecognizers>
</ContentPresenter>
//code behind
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
ContentPresenter cp = sender as ContentPresenter;
var button = cp.Content.Parent as RadioButton;
button.IsChecked = true;
}

How can I bind this Icon's Color to this Label Color?

As you can see below, the FlyoutItem has an Icon and a Title.
<FlyoutItem Title="About" >
<FlyoutItem.Icon>
<FontImageSource FontFamily="MaterialDesignIconFont"
Glyph="{StaticResource InformationOutlineGlyph}"
Color="Green" />
</FlyoutItem.Icon>
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
The Title Color changes automatically because of this Style:
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="LightBlue"></Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource PrimaryColor}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
So the Label that is the Title changes color automatically when the FlyoutItem is selected. I need the Icon to do the same thing. I could use a trigger to set the FontImageSource but that comes with its own problems.
Given the TargetName "FlyoutItemLabel" from the above Style, is it possible to create a binding from the FontImageSource.Color to each FlyoutItem's "FlyoutItemLabel".Color? It would have to bind upward to the FlyoutItem ancestor, then downward to the <Label x:Name="FlyoutItemLabel" />, wouldn't it?
You could set the [ItemTemplate][1] of FlyoutItem as you want
<Shell.ItemTemplate>
<DataTemplate >
<Grid Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding xxx}"
Margin="5"
BackgroundColor="{Binding Source={x:Reference label} ,Path=BackgroundColor}"
HeightRequest="45" />
<Label Grid.Column="1"
x:Name="label"
BackgroundColor="Red"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>

How to remove border from a AutoSuggestBox in UWP?

I have a AutoSuggestBox whose border I want to remove.
<AutoSuggestBox x:Name="txtSearch" Width="200" QueryIcon="Find"
PlaceholderText="Search" Background="Transparent" BorderThickness="0" BorderBrush="Transparent" />
Created a Style template
<Style x:Key="AutoSuggestWithoutBorder" TargetType="AutoSuggestBox">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AutoSuggestBox">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Landscape"/>
<VisualState x:Name="Portrait"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBox x:Name="TextBox"
Style="{TemplateBinding TextBoxStyle}"
PlaceholderText="{TemplateBinding PlaceholderText}"
Header="{TemplateBinding Header}"
Width="{TemplateBinding Width}"
BorderThickness="0"
ScrollViewer.BringIntoViewOnFocusChange="False"
Canvas.ZIndex="0"
Margin="0"
DesiredCandidateWindowAlignment="BottomEdge"/>
<Popup x:Name="SuggestionsPopup">
<Border x:Name="SuggestionsContainer" BorderThickness="0">
<Border.RenderTransform>
<TranslateTransform x:Name="UpwardTransform"/>
</Border.RenderTransform>
<ListView
x:Name="SuggestionsList"
Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
BorderThickness="0"
BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
IsItemClickEnabled="True"
ItemTemplate="{TemplateBinding ItemTemplate}"
ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
Margin="{ThemeResource AutoSuggestListMargin}"
Padding="{ThemeResource AutoSuggestListPadding}">
<ListView.ItemContainerTransitions>
<TransitionCollection />
</ListView.ItemContainerTransitions>
</ListView>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Making the BorderThickness 0 where required.