XAML WinUI 3文本框与集成的信息标签

vwkv1x7d  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(141)

我想创建一个SearchTextBox(从原始TextBox派生),其中包含一个带有结果计数的标签。.xaml文件也应该从原始的TextBox派生,如:

<TextBox>
    <TextBox.Style>
        <Style>
            ...
        </Style>
    </TextBox.Style>
</TextBox>

而不应该只是资源目录中的样式。
下面是原始的TextBox以及它应该是什么样子:

rqdpfwrv

rqdpfwrv1#

您可以创建自定义控件:

CustomTextBox.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TextBoxExample;

public class CustomTextBox : TextBox
{
    public string FooterText
    {
        get => (string)GetValue(FooterTextProperty);
        set => SetValue(FooterTextProperty, value);
    }

    public static readonly DependencyProperty FooterTextProperty =
        DependencyProperty.Register(
            nameof(FooterText),
            typeof(string),
            typeof(CustomTextBox),
            new PropertyMetadata(string.Empty));
}

然后像这样使用它:

<StackPanel>
    <NumberBox
        x:Name="CountNumberBox"
        Value="5" />
    <local:CustomTextBox
        FooterText="{x:Bind CountNumberBox.Value, Mode=OneWay}"
        PlaceholderText="Search...">
        <TextBox.Style>
            <Style
                BasedOn="{StaticResource DefaultTextBoxStyle}"
                TargetType="local:CustomTextBox">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:CustomTextBox">
                            <Grid>
                                :
                                :
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <ContentPresenter
                                    x:Name="HeaderContentPresenter"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="2"
                                    Margin="{ThemeResource TextBoxTopHeaderMargin}"
                                    VerticalAlignment="Top"
                                    x:DeferLoadStrategy="Lazy"
                                    Content="{TemplateBinding Header}"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    FontWeight="Normal"
                                    Foreground="{ThemeResource TextControlHeaderForeground}"
                                    TextWrapping="Wrap"
                                    Visibility="Collapsed" />
                                <Border
                                    x:Name="BorderElement"
                                    Grid.Row="1"
                                    Grid.RowSpan="1"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="2"
                                    MinWidth="{TemplateBinding MinWidth}"
                                    MinHeight="{TemplateBinding MinHeight}"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Control.IsTemplateFocusTarget="True"
                                    CornerRadius="{TemplateBinding CornerRadius}" />
                                <ScrollViewer
                                    x:Name="ContentElement"
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    AutomationProperties.AccessibilityView="Raw"
                                    Foreground="{TemplateBinding Foreground}"
                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                    HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                    IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                    IsTabStop="False"
                                    IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                    VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                    ZoomMode="Disabled" />
                                <TextBlock
                                    x:Name="PlaceholderTextContentPresenter"
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="3"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
                                    IsHitTestVisible="False"
                                    Text="{TemplateBinding PlaceholderText}"
                                    TextAlignment="{TemplateBinding TextAlignment}"
                                    TextWrapping="{TemplateBinding TextWrapping}" />

                                <!--  FooterTextPresenter  -->
                                <TextBlock
                                    x:Name="FooterTextPresenter"
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    VerticalAlignment="Center"
                                    Text="{TemplateBinding FooterText}" />

                                <Button
                                    x:Name="DeleteButton"
                                    Grid.Row="1"
                                    Grid.Column="2"
                                    Width="30"
                                    Padding="{ThemeResource HelperButtonThemePadding}"
                                    VerticalAlignment="Stretch"
                                    AutomationProperties.AccessibilityView="Raw"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="{TemplateBinding CornerRadius}"
                                    FontSize="{TemplateBinding FontSize}"
                                    IsTabStop="False"
                                    Style="{StaticResource DeleteButtonStyle}"
                                    Visibility="Collapsed" />
                                    <ContentPresenter
                                    x:Name="DescriptionPresenter"
                                    Grid.Row="2"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="3"
                                    x:Load="False"
                                    AutomationProperties.AccessibilityView="Raw"
                                    Content="{TemplateBinding Description}"
                                    Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
                                :
                                :
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TextBox.Style>
    </local:CustomTextBox>
</StackPanel>

请注意,我在这个答案的样式中省略了一堆代码。基本上,您只需要从generic.xaml中引入DefaultTextBoxStyle,为页脚添加一列,添加页脚并调整一些列索引。

相关问题