在UWP中自定义半边框样式的输入框
2015-09-10 23:09
603 查看
Windows10发布已经有一阵子了,已经有一些公司上架了自己的UWP应用程序,为WindowsStore增添光彩。已经安装Windows10的用户也或多或少的安装了一些UWP的应用程序,针对这些UWP的应用程序设计来说有好有坏,好的方面体现在它们的用户体验始终是保证一致,符合Win10的产品理念,步调能够保持一致;坏的方面就是由于它们步调太过于一致导致用户体验太过雷同,进而出现一些用户会出现审美疲劳。这个博主可以理解理解,毕竟UWP应用才推出不久,接触的人也不是很多,关键一点,生态圈也很羸弱,所以没办法,或许暂时还没办法达到与Android和IPhone那样好的用户体验,但既然已入坑.NET ,那我不入地狱谁入地狱呀:)?作为.NET开发人员,那就努力写些一些漂亮的UI控件,在这个小米加步枪的开发时代里多做一个事情,希望能够为后来的开发者提供一个好的生态环境(程序猿,情怀都是骗别人的,你信吗?)。在这篇博文中,博主为新手朋友们介绍一下如何在XAML中通过对控件的样式设置来实现带半边框样式的输入框。
谈到输入框,很多朋友都会想到TextBox控件。没错,一个很不错的选择。那如何设置它的边框为半边框的样式呢?有点开发经验的朋友或许会想到通过使用LinearGradientBrush来设置TextBox的BorderBrush。好那我们就先试一下,看符合我们的要求不,代码贴上:
来,运行起来看看效果:
View Code
效果图如下所示:
写到这里,发现它已经差不多了吧,不知你是否对它满意???!!!
故意把后两部分代码折叠起来,因为有点小长,所以怕新手朋友们看完后鄙视我。其实你要是能看懂第二中的样式的话,第三中就不在话下了!
好了,现在已经很晚了,该去洗澡睡觉了!
代码有点小乱就不上传了,感兴趣的朋友可以自行Coding!
原文地址: stackoverflow.com
谈到输入框,很多朋友都会想到TextBox控件。没错,一个很不错的选择。那如何设置它的边框为半边框的样式呢?有点开发经验的朋友或许会想到通过使用LinearGradientBrush来设置TextBox的BorderBrush。好那我们就先试一下,看符合我们的要求不,代码贴上:
<TextBox Grid.Row="0" VerticalAlignment="Center" Margin="12,0,12,0"> <TextBox.BorderBrush> <LinearGradientBrush EndPoint="1,1" StartPoint="1,0"> <GradientStop Color="Transparent" Offset="0"/> <GradientStop Color="Transparent" Offset="0.75"/> <GradientStop Color="Green" Offset="0.75"/> <GradientStop Color="Green" Offset="1"/> </LinearGradientBrush> </TextBox.BorderBrush> </TextBox>
来,运行起来看看效果:
<Page.Resources> <Style x:Key="HalfBorderTextBoxStyle" TargetType="SearchBox"> <Setter Property="BorderThickness" Value="{ThemeResource SearchBoxBorderThemeThickness}"/> <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> <Setter Property="FontSize" Value="{ThemeResource SearchBoxContentThemeFontSize}"/> <Setter Property="FontWeight" Value="{ThemeResource SearchBoxContentThemeFontWeight}"/> <Setter Property="Padding" Value="{ThemeResource SearchBoxThemePadding}"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="Typography.StylisticSet20" Value="True"/> <Setter Property="Foreground"> <Setter.Value> <SolidColorBrush Color="White"/> </Setter.Value> </Setter> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="Transparent"/> </Setter.Value> </Setter> <Setter Property="BorderBrush"> <Setter.Value> <SolidColorBrush Color="#FF8FBE19" /> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="SearchBox"> <Grid x:Name="SearchBoxGrid"> <Grid.Resources> <Style x:Key="SearchButtonStyle" TargetType="Button"> <Setter Property="IsTabStop" Value="False"/> <Setter Property="VerticalAlignment" Value="Stretch"/> <Setter Property="UseSystemFocusVisuals" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="SearchGlyph"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxButtonPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchButtonBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxButtonPointerOverBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="SearchGlyph"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxFocusedTextThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchButtonBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxFocusedBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid x:Name="SearchButtonBackground" Background="{TemplateBinding Background}" Margin="0,0,2,3"> <TextBlock x:Name="SearchGlyph" AutomationProperties.AccessibilityView="Raw" Foreground="White" FontStyle="Normal" FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Center" Text="" VerticalAlignment="Center"/> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="SearchTextBoxStyle" TargetType="TextBox"> <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}"/> <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}"/> <Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}"/> <Setter Property="Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}"/> <Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}"/> <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}"/> <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}"/> <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> <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> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Normal"> <Storyboard> <DoubleAnimation Duration="0" To="{ThemeResource TextControlBackgroundThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BorderElement"/> <DoubleAnimation Duration="0" To="{ThemeResource TextControlBorderThemeBrushOpacity}" Storyboard.TargetProperty="(Border.BorderBrush).Opacity" Storyboard.TargetName="BorderElement"/> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <DoubleAnimation Duration="0" To="{ThemeResource TextControlPointerOverBackgroundThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BorderElement"/> <DoubleAnimation Duration="0" To="{ThemeResource TextControlPointerOverBorderThemeBrushOpacity}" Storyboard.TargetProperty="(Border.BorderBrush).Opacity" Storyboard.TargetName="BorderElement"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ButtonStates"/> </VisualStateManager.VisualStateGroups> <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="1" Grid.RowSpan="1"/> <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextBoxForegroundHeaderThemeBrush}" FontWeight="Semilight" Margin="0,4,0,4" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/> <ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"/> <ContentControl x:Name="PlaceholderTextContentPresenter" Background="Transparent" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.2" To="Focused"> <VisualTransition.GeneratedEasingFunction> <ExponentialEase EasingMode="EaseIn"/> </VisualTransition.GeneratedEasingFunction> <Storyboard> <DoubleAnimation Duration="0:0:0.2" To="1.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LeftVerticalLine" d:IsOptimized="True" /> <DoubleAnimation Duration="0:0:0.2" To="1.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="RightVerticalLine" d:IsOptimized="True" /> </Storyboard> </VisualTransition> <VisualTransition From="Focused" GeneratedDuration="0:0:0.2"> <VisualTransition.GeneratedEasingFunction> <ExponentialEase EasingMode="EaseOut"/> </VisualTransition.GeneratedEasingFunction> </VisualTransition> </VisualStateGroup.Transitions> <VisualState x:Name="Disabled"/> <VisualState x:Name="Normal"/> <VisualState x:Name="PointerOver"/> <VisualState x:Name="Focused"> <VisualState.Setters> <Setter Target="LeftVerticalLine.(UIElement.Opacity)" Value="1" /> <Setter Target="RightVerticalLine.(UIElement.Opacity)" Value="1" /> <Setter Target="LeftVerticalLine.(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Value="1.4" /> <Setter Target="RightVerticalLine.(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Value="1.4" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle x:Name="BottomLine" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Bottom" Height="2" Fill="{TemplateBinding BorderBrush}" /> <Rectangle x:Name="LeftVerticalLine" HorizontalAlignment="Left" Height="4" Margin="0,0,0,2" Grid.Row="1" Stretch="Fill" UseLayoutRounding="True" VerticalAlignment="Bottom" Width="2" RenderTransformOrigin="0.5,1" Fill="{TemplateBinding BorderBrush}"> <Rectangle.RenderTransform> <CompositeTransform /> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="RightVerticalLine" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Right" Height="4" Margin="0,0,0,2" Stretch="Fill" UseLayoutRounding="True" VerticalAlignment="Bottom" Width="2" RenderTransformOrigin="0.5,1" Fill="{TemplateBinding BorderBrush}"> <Rectangle.RenderTransform> <CompositeTransform /> </Rectangle.RenderTransform> </Rectangle> <TextBox x:Name="SearchTextBox" BorderThickness="0" Background="Transparent" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" InputScope="Search" MinHeight="{ThemeResource SearchBoxTextBoxThemeMinHeight}" MaxLength="2048" Padding="{TemplateBinding Padding}" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{StaticResource SearchTextBoxStyle}" TextWrapping="NoWrap" VerticalAlignment="Stretch"/> <Button x:Name="SearchButton" AutomationProperties.AccessibilityView="Raw" Background="Transparent" Grid.Column="1" FontWeight="{ThemeResource SearchBoxButtonThemeFontWeight}" Style="{StaticResource SearchButtonStyle}"/> </Grid> <Popup x:Name="SearchSuggestionsPopup" HorizontalAlignment="Left" VerticalAlignment="Bottom"> <Border x:Name="SearchSuggestionsPopupBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" MinWidth="{ThemeResource SearchBoxSuggestionPopupThemeMinWidth}"> <Border.Resources> <Style x:Key="SearchSuggestionListViewItemStyle" TargetType="ListViewItem"> <Setter Property="Background" Value="Transparent"/> <Setter Property="TabNavigation" Value="Local"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="Margin" Value="0"/> <Setter Property="UseSystemFocusVisuals" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <Border x:Name="OuterContainer"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <Storyboard> <PointerUpThemeAnimation Storyboard.TargetName="ContentContainer"/> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ListViewItemContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxButtonForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <PointerUpThemeAnimation Storyboard.TargetName="ContentContainer"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <PointerDownThemeAnimation TargetName="ContentContainer"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ListViewItemContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxButtonForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Selected"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ListViewItemContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxButtonForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <PointerUpThemeAnimation Storyboard.TargetName="ContentContainer"/> </Storyboard> </VisualState> <VisualState x:Name="PointerOverSelected"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ListViewItemContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxButtonForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <PointerUpThemeAnimation Storyboard.TargetName="ContentContainer"/> </Storyboard> </VisualState> <VisualState x:Name="PressedSelected"> <Storyboard> <PointerDownThemeAnimation TargetName="ContentContainer"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ListViewItemContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxButtonForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="DisabledStates"> <VisualState x:Name="Enabled"/> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Duration="0" To="{ThemeResource ListViewItemDisabledThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ListViewItemContentPresenter"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid x:Name="ContentContainer"> <Rectangle x:Name="PointerOverBorder" Fill="{ThemeResource SearchBoxButtonBackgroundThemeBrush}" IsHitTestVisible="False" Control.IsTemplateFocusTarget="True" Opacity="0"/> <Rectangle x:Name="SelectionBackground" Fill="{ThemeResource SearchBoxButtonBackgroundThemeBrush}" Opacity="0"/> <ContentPresenter x:Name="ListViewItemContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontWeight="{Binding FontWeight, ElementName=SearchTextBox}" FontSize="{Binding FontSize, ElementName=SearchTextBox}" FontFamily="{Binding FontFamily, ElementName=SearchTextBox}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Border.Resources> <Grid MaxHeight="{ThemeResource SearchBoxSuggestionPopupThemeMaxHeight}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <Border x:Name="IMECandidateListContainer"/> <Border x:Name="IMECandidateListSeparator" BorderBrush="{ThemeResource SearchBoxIMECandidateListSeparatorThemeBrush}" BorderThickness="{ThemeResource SearchBoxIMECandidateListSeparatorThemeThickness}" Grid.Row="1" Visibility="Collapsed"/> <ListView x:Name="SearchSuggestionsList" Background="{ThemeResource TextBoxBackgroundThemeBrush}" IsTabStop="False" IsItemClickEnabled="true" Grid.Row="2"> <ListView.Resources> <DataTemplate x:Name="HitHighlightedTextBlock"> <RichTextBlock x:Name="TextBlock" AutomationProperties.AccessibilityView="Raw" SelectionHighlightColor="{ThemeResource SearchBoxHitHighlightForegroundThemeBrush}" TextWrapping="Wrap" TextTrimming="WordEllipsis"> <RichTextBlock.Resources> <DataTemplate x:Name="SelectedHitHighlightedRun"> <Run Foreground="{ThemeResource SearchBoxHitHighlightSelectedForegroundThemeBrush}"/> </DataTemplate> </RichTextBlock.Resources> </RichTextBlock> </DataTemplate> </ListView.Resources> <ListView.ItemTemplate> <DataTemplate> <Grid> <ContentControl x:Name="QuerySuggestionTemplate" Typography.DiscretionaryLigatures="False" Margin="{ThemeResource SearchBoxQuerySuggestionThemeMargin}" Visibility="Collapsed" VerticalAlignment="Center"/> <Grid x:Name="ResultSuggestionTemplate" Typography.DiscretionaryLigatures="False" Margin="{ThemeResource SearchBoxResultSuggestionThemeMargin}" Visibility="Collapsed"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Image x:Name="ResultSuggestionImage" Height="{ThemeResource SearchBoxResultSuggestionImageThemeHeight}" Margin="{ThemeResource SearchBoxSuggestionSubcomponentThemeMargin}" Grid.RowSpan="2" Width="{ThemeResource SearchBoxResultSuggestionImageThemeWidth}"/> <ContentControl x:Name="ResultSuggestionText" Grid.Column="1" VerticalAlignment="Center"/> <ContentControl x:Name="ResultSuggestionDetailText" Grid.Column="1" Grid.Row="1" VerticalAlignment="Center"/> </Grid> <Grid x:Name="SeparatorSuggestionTemplate" Typography.DiscretionaryLigatures="False" Margin="{ThemeResource SearchBoxSeparatorSuggestionThemeMargin}" Visibility="Collapsed"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBlock x:Name="SeparatorSuggestionText" FontWeight="{ThemeResource SearchBoxContentThemeFontWeight}" FontSize="{ThemeResource SearchBoxContentThemeFontSize}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" Margin="{ThemeResource SearchBoxSuggestionSubcomponentThemeMargin}" TextTrimming="WordEllipsis" VerticalAlignment="Center"/> <Border BorderBrush="{ThemeResource SearchBoxSeparatorSuggestionForegroundThemeBrush}" BorderThickness="0,1,0,0" Grid.Column="1" VerticalAlignment="Center"/> </Grid> </Grid> </DataTemplate> </ListView.ItemTemplate> <ListView.ItemContainerTransitions> <TransitionCollection/> </ListView.ItemContainerTransitions> <ListView.ItemContainerStyle> <StaticResource ResourceKey="SearchSuggestionListViewItemStyle"/> </ListView.ItemContainerStyle> </ListView> </Grid> </Border> </Popup> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="48"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <SearchBox Margin="12,0,12,0" VerticalAlignment="Center" Style="{StaticResource HalfBorderTextBoxStyle}"/> </Grid>
View Code
效果图如下所示:
写到这里,发现它已经差不多了吧,不知你是否对它满意???!!!
故意把后两部分代码折叠起来,因为有点小长,所以怕新手朋友们看完后鄙视我。其实你要是能看懂第二中的样式的话,第三中就不在话下了!
好了,现在已经很晚了,该去洗澡睡觉了!
代码有点小乱就不上传了,感兴趣的朋友可以自行Coding!
原文地址: stackoverflow.com
相关文章推荐
- CSS 伪类和伪元素--pseudo
- CSS布局
- js获取元素经过计算的css样式
- css
- 【前端学习笔记】2015-09-10~~~~ css层叠样式表~~格式
- SQLServer中DateTime转换成Varchar样式
- CSS清除浮动
- 前端常见BUG--css篇,及处理方法(持续更新)
- 前端常见BUG--css篇,及处理方法(持续更新)
- css将书写模式变成纵向
- css3写各种形状(收集篇...)
- POI中设置Excel单元格格式样式(居中,字体,边框,背景色、列宽、合并单元格等)
- html&css注释
- css常见布局
- CSS3动画笔记
- file 上传样式
- css3 animation 参数详解
- CSS浮动
- css续集
- HTML-CSS