c#xamlcustom-controlswinui-3winui
C# WinUI3 modifying AutosuggestBox
I'm trying to modify the standard AutoSuggestBox in a way, that the Listview popup is larger than the Textbox itself:
Unfortunately I'm stuck. I tried to create my own styledefinition:
(Standard version got from Blend)
<Style x:Key="AutoSuggestBoxStyle1" TargetType="AutoSuggestBox">
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}"/>
<Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AutoSuggestBox">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Landscape"/>
<VisualState x:Name="Portrait"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBox x:Name="TextBox"
ScrollViewer.BringIntoViewOnFocusChange="False"
DesiredCandidateWindowAlignment="BottomEdge"
Description="{TemplateBinding Description}"
Header="{TemplateBinding Header}"
Margin="0"
PlaceholderText="{TemplateBinding PlaceholderText}"
Style="{TemplateBinding TextBoxStyle}"
UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
Width="{TemplateBinding Width}"
Canvas.ZIndex="0"/>
<Popup x:Name="SuggestionsPopup">
<Border x:Name="SuggestionsContainer">
<ListView x:Name="SuggestionsList"
Background="{ThemeResource AutoSuggestBoxSuggestionsListBackground}"
BorderBrush="{ThemeResource AutoSuggestBoxSuggestionsListBorderBrush}"
BorderThickness="{ThemeResource AutoSuggestListBorderThemeThickness}"
DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
ItemTemplate="{TemplateBinding ItemTemplate}"
ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
IsItemClickEnabled="True"
Margin="{ThemeResource AutoSuggestListMargin}"
MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
Padding="{ThemeResource AutoSuggestListPadding}"/>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My version:
<Style x:Key="AutoSuggestBoxStyle1" TargetType="AutoSuggestBox">
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}"/>
<Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AutoSuggestBox">
<StackPanel x:Name="LayoutRoot">
<TextBox x:Name="TextBox"
ScrollViewer.BringIntoViewOnFocusChange="False"
DesiredCandidateWindowAlignment="BottomEdge"
Description="{TemplateBinding Description}"
Header="{TemplateBinding Header}"
Margin="0"
PlaceholderText="{TemplateBinding PlaceholderText}"
Style="{TemplateBinding TextBoxStyle}"
UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
Width="100"
Canvas.ZIndex="0"/>
<Popup x:Name="SuggestionsPopup">
<Border x:Name="SuggestionsContainer" Width="250">
<ListView x:Name="SuggestionsList"
Background="{ThemeResource AutoSuggestBoxSuggestionsListBackground}"
BorderBrush="{ThemeResource AutoSuggestBoxSuggestionsListBorderBrush}"
BorderThickness="{ThemeResource AutoSuggestListBorderThemeThickness}"
DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
ItemTemplate="{TemplateBinding ItemTemplate}"
ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
IsItemClickEnabled="True"
Margin="{ThemeResource AutoSuggestListMargin}"
MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
Padding="{ThemeResource AutoSuggestListPadding}"/>
</Border>
</Popup>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Unfortunately the Popupwidth is always as wide as the TextBox
Then I tried to create my own custom control and tried to rebuild the functionality of the AutoSuggestBox.
Now I don't know how to get XAML elements from the styled TextBox which is used in the AutoSuggestBox
<Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}"/>
I want to access the parts of the styled TextBox to add some functionalities and to add the QueryIcon to the related Button
<Style x:Key="AutoSuggestBoxTextBoxStyle" TargetType="TextBox">
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}"/>
<Setter Property="Foreground" Value="{ThemeResource TextControlForeground}"/>
<Setter Property="Background" Value="{ThemeResource TextControlBackground}"/>
<Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}"/>
<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}"/>
<Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
<Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
...
<Border x:Name="BorderElement" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="3" Grid.RowSpan="1" Grid.Row="1"/>
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.ColumnSpan="3" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="{ThemeResource AutoSuggestBoxTopHeaderMargin}" Grid.Row="0" TextWrapping="Wrap" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
<ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"/>
<ContentControl x:Name="PlaceholderTextContentPresenter" Content="{TemplateBinding PlaceholderText}" Grid.ColumnSpan="3" Foreground="{ThemeResource TextControlPlaceholderForeground}" IsTabStop="False" IsHitTestVisible="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1"/>
<Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" MinWidth="34" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed"/>
<Button x:Name="QueryButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="2" FontSize="{TemplateBinding FontSize}" IsTabStop="False" MinWidth="34" Grid.Row="1" Style="{StaticResource QueryButtonStyle}" VerticalAlignment="Stretch" Width="{TemplateBinding Height}"/>
<ContentPresenter x:Name="DescriptionPresenter" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Description}" Grid.ColumnSpan="3" Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" Grid.Row="2" x:Load="False"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then in the function override void OnApplyTemplate() I can get the elements from my own style template, but I can't figure out how to get the elements coming from the textbox-style?
public sealed class CustomControl1 : Control
{
public CustomControl1()
{
this.DefaultStyleKey = typeof(CustomControl1);
}
private Popup popup;
private TextBox textbox;
protected override void OnApplyTemplate()
{
textbox = GetTemplateChild("QueryTextBox") as TextBox;
popup = GetTemplateChild("SuggestionsPopup") as Popup;
base.OnApplyTemplate();
}
}
Any help would be much appreciated. Or maybe do you know if the source code from the AutoSuggestBox is available on GitHub?
Solution
You need something like this:
if (GetTemplateChild(nameof(TextBox)) is TextBox textBox)
{
this.TextBox = textBox;
this.TextBox.Loaded += (s, e) =>
{
QueryButton = this.TextBox.FindDescendant(name: "QueryButton") as Button;
};
}
BTW, the FindDescendant() extension method is from the CommunityToolkit.WinUI.UI NuGet package.
- Why does an empty preprocessor command still evaluate to something?
- How to implement variable sized array within C struct
- Character array typecasting to integer
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- How to get the sign, mantissa and exponent of a floating point number
- Why do MCU libraries use logic operations instead of bitfield structs?
- What kind of implementation can I use for a static associative array on a vintage system with very limited resources?
- Determine libraries to link against for a windows library function?
- Passing macro values to arm linker that places variable at a specific location
- running a program with wildcards as arguments
- How to perform addition of two vectors of 8-bit integers with a single addition in C/C++
- GNU RISC-V Embedded GCC throws "x ISA extension `xw' must be set with the versions" error
- Counting pulses using a swiss flow meter with an Arduino, how is it done?
- How to create a folder in C (need to run on both Linux and Windows)
- Is there any way to compute the width of an integer type at compile-time?
- How can I initialize all members of an array to the same value?
- Is C notably faster than C++
- How to get the Windows SDK version number a program is compiling with at compile time
- Confused by difference between expression inside if and expression outside if
- Equivalent of atoi for unsigned integers
- k&r: Exercise 1-18. Program takes input but doesnt produce any output?
- Using in C thrd_sleep() to either wait for time or interrupt by signal. Example?
- How can I compute `exp(x)/2` when `x` is large?
- c programming: answer always equates to 0
- Is it possible to access a parameter of a function from another function in C?
- Will this expression evaluate to true or false (1 or 0) in C?
- What Is the Return Value of strcspn() When Str1 Does not Contain Str2?
- Mapping a numeric range onto another
- Signalled and non-signalled state of event
- Why is faster to do a branch than a lookup?