WPF 实现包含ComboBox功能的查询控件

思路:Textblock+TextBox+Button,通过Template控制样式;效果如下:

控件模板如下:

 1 <!--Popup按钮样式-->
 2         <Style x:Key="PopupButtonStyle" TargetType="{x:Type Button}">
 3             <Setter Property="Cursor" Value="Hand"/>
 4             <Setter Property="ClickMode" Value="Press"/>
 5             <Setter Property="IsHitTestVisible" Value="True"></Setter>
 6             <Setter Property="Focusable" Value="False"/>
 7             <Setter Property="Template">
 8                 <Setter.Value>
 9                     <ControlTemplate TargetType="{x:Type Button}">
10                         <Grid IsHitTestVisible="True">
11                             <Border IsHitTestVisible="True" x:Name="back" Background="LightGray" Opacity="0.3">
12                             </Border>
13                             <ContentPresenter IsHitTestVisible="True" Margin="10,0,10,0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
14                         </Grid>
15                         <ControlTemplate.Triggers>
16                             <Trigger Property="IsMouseOver" Value="True">
17                                 <!--<Setter TargetName="back" Property="Opacity" Value="0.2"/>-->
18                                 <Setter TargetName="back" Property="Background" Value="#4499ee"/>
19                             </Trigger>
20                         </ControlTemplate.Triggers>
21                     </ControlTemplate>
22                 </Setter.Value>
23             </Setter>
24 
25         </Style>
 1 <!--下拉按钮模板-->
 2         <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
 3             <Grid>
 4                 <Grid.ColumnDefinitions>
 5                     <ColumnDefinition Width="*"/>
 6                     <ColumnDefinition Width="auto"/>
 7                 </Grid.ColumnDefinitions>
 8                 <Border x:Name="PART_Border" Grid.ColumnSpan="2" Background="LightGray" Opacity="0.3" CornerRadius="5,0,0,5" BorderThickness="1" BorderBrush="Gray"/>
 9                 <TextBlock Text="{TemplateBinding Content}" x:Name="tbxfont" FontSize="12" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0,0,0"/>
10                 <Path Grid.Column="1" x:Name="path" Data="M80,160 L139.83333,239.83333 199.83399,159.5 z" Fill="LightGray" HorizontalAlignment="Center"  Stretch="Fill" Stroke="LightGray" Width="8" Height="6" Margin="5,5"/>
11                 <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Visibility="Collapsed"/>
12             </Grid>
13             <ControlTemplate.Triggers>
14                 <Trigger Property="IsMouseOver" Value="True">
15                     <Setter Property="Opacity" TargetName="PART_Border" Value="1"/>
16                     <Setter Property="Background" TargetName="PART_Border" Value="#4499ee" />
17                     <Setter TargetName="tbxfont" Property="Foreground" Value="White"/>
18                     <Setter TargetName="tbxfont" Property="FontSize" Value="14"/>
19                     <Setter TargetName="path" Property="Fill" Value="White"/>
20                     <Setter Property="Cursor" Value="Hand"/>
21                 </Trigger>
22             </ControlTemplate.Triggers>
23         </ControlTemplate>
 1 <!--查询按钮模板-->
 2         <ControlTemplate x:Key="SearchBtnTemplate" TargetType="Button">
 3             <Grid>
 4                 <Grid.ColumnDefinitions>
 5                     <ColumnDefinition Width="*"/>
 6                     <ColumnDefinition Width="auto"/>
 7                 </Grid.ColumnDefinitions>
 8                 <Border x:Name="PART_Border" Grid.ColumnSpan="2" Background="LightGray" Opacity="0.3" CornerRadius="0,5,5,0" BorderThickness="1" BorderBrush="Gray"/>
 9                 <TextBlock Text="{TemplateBinding Content}" x:Name="tbxfont" FontSize="12" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0"/>
10                 <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Visibility="Collapsed"/>
11             </Grid>
12             <ControlTemplate.Triggers>
13                 <Trigger Property="IsMouseOver" Value="True">
14                     <Setter Property="Opacity" TargetName="PART_Border" Value="1"/>
15                     <Setter Property="Background" TargetName="PART_Border" Value="#4499ee" />
16                     <Setter TargetName="tbxfont" Property="Foreground" Value="White"/>
17                     <Setter TargetName="tbxfont" Property="FontSize" Value="14"/>
18                     <Setter Property="Cursor" Value="Hand"/>
19                 </Trigger>
20             </ControlTemplate.Triggers>
21         </ControlTemplate>
 1 <!-- 文本框模板-->
 2         <ControlTemplate x:Key="TextBoxTemplate" TargetType="TextBox">
 3             <Grid>
 4                 <Border BorderThickness="0,1,0,1" BorderBrush="LightGray"/>
 5                 <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="2"/>
 6             </Grid>
 7             <ControlTemplate.Triggers>
 8                 <Trigger Property="IsMouseOver" Value="True">
 9                     <Setter Property="BorderBrush" Value="Gray"/>
10                 </Trigger>
11             </ControlTemplate.Triggers>
12         </ControlTemplate>
 1 <Grid Background="White">
 2         <Grid.ColumnDefinitions>
 3             <ColumnDefinition Width="auto"/>
 4             <ColumnDefinition Width="*"/>
 5             <ColumnDefinition Width="auto"/>
 6         </Grid.ColumnDefinitions>
 7         <Button x:Name="btnChangeType" Template="{StaticResource ButtonTemplate}" Content="就诊卡" FontSize="14" Click="btnChangeType_Click"/>
 8         <TextBox Grid.Column="1" BorderBrush="LightGray" Padding="0" VerticalContentAlignment="Center" FontSize="14"  Template="{StaticResource TextBoxTemplate}"/>
 9         <Button Template="{StaticResource SearchBtnTemplate}" Grid.Column="2" Content="查询" FontSize="14"/>
10 
11         <Popup Name="AppPopup" PopupAnimation="Slide"
12                    Placement="Bottom" PlacementTarget="{Binding  ElementName=btnChangeType}" IsOpen="False" StaysOpen="False">
13             <Grid x:Name="gridRightKeyMenu" Background="White"  ShowGridLines="False" >
14                 <Border FocusVisualStyle="{x:Null}" Background="Transparent" BorderThickness="1"></Border>
15                 <StackPanel Orientation="Vertical" Margin="2">
16                     <Button FocusVisualStyle="{x:Null}" Height="28" Width="100" Style="{StaticResource PopupButtonStyle}" Command="{Binding Path=SettingMenuItemCommand}" CommandParameter="0">
17                         <Border FocusVisualStyle="{x:Null}" BorderThickness="0" CornerRadius="2">
18                             <TextBlock FocusVisualStyle="{x:Null}" Text="就诊卡" FontFamily="Microsoft YaHei" FontSize="12"></TextBlock>
19                         </Border>
20                     </Button>
21                     <Button FocusVisualStyle="{x:Null}" Height="28" Width="100" Style="{StaticResource PopupButtonStyle}" Command="{Binding Path=SettingMenuItemCommand}" CommandParameter="1">
22                         <Border FocusVisualStyle="{x:Null}" BorderThickness="0" CornerRadius="2">
23                             <TextBlock FocusVisualStyle="{x:Null}" Text="标识卡" FontFamily="Microsoft YaHei" FontSize="12"></TextBlock>
24                         </Border>
25                     </Button>
26                     <Button FocusVisualStyle="{x:Null}" Height="28" Width="100" Style="{StaticResource PopupButtonStyle}" Command="{Binding Path=SettingMenuItemCommand}" CommandParameter="2">
27                         <Border FocusVisualStyle="{x:Null}" BorderThickness="0" CornerRadius="2">
28                             <TextBlock FocusVisualStyle="{x:Null}" Text="挂号单" FontFamily="Microsoft YaHei" FontSize="12" ></TextBlock>
29                         </Border>
30                     </Button>
31                     <Button FocusVisualStyle="{x:Null}" Height="28" Width="100" Style="{StaticResource PopupButtonStyle}" Command="{Binding Path=SettingMenuItemCommand}" CommandParameter="3">
32                         <Border FocusVisualStyle="{x:Null}" BorderThickness="0" CornerRadius="2">
33                             <TextBlock FocusVisualStyle="{x:Null}" Text="姓名" FontFamily="Microsoft YaHei" FontSize="12" ></TextBlock>
34                         </Border>
35                     </Button>
36                     <Button FocusVisualStyle="{x:Null}" Height="28" Width="100" Style="{StaticResource PopupButtonStyle}" Command="{Binding Path=SettingMenuItemCommand}" CommandParameter="3">
37                         <Border FocusVisualStyle="{x:Null}" BorderThickness="0" CornerRadius="2">
38                             <TextBlock FocusVisualStyle="{x:Null}" Text="二代身份证" FontFamily="Microsoft YaHei" FontSize="12" ></TextBlock>
39                         </Border>
40                     </Button>
41                     <Button FocusVisualStyle="{x:Null}" Height="28" Width="100" Style="{StaticResource PopupButtonStyle}" Command="{Binding Path=SettingMenuItemCommand}" CommandParameter="3">
42                         <Border FocusVisualStyle="{x:Null}" BorderThickness="0" CornerRadius="2">
43                             <TextBlock FocusVisualStyle="{x:Null}" Text="IC卡" FontFamily="Microsoft YaHei" FontSize="12" ></TextBlock>
44                         </Border>
45                     </Button>
46                     <Button FocusVisualStyle="{x:Null}" Height="28" Width="100" Style="{StaticResource PopupButtonStyle}" Command="{Binding Path=SettingMenuItemCommand}" CommandParameter="3">
47                         <Border FocusVisualStyle="{x:Null}" BorderThickness="0" CornerRadius="2">
48                             <TextBlock FocusVisualStyle="{x:Null}" Text="排队号" FontFamily="Microsoft YaHei" FontSize="12" ></TextBlock>
49                         </Border>
50                     </Button>
51                     <Button FocusVisualStyle="{x:Null}" Height="28" Width="100" Style="{StaticResource PopupButtonStyle}" Command="{Binding Path=SettingMenuItemCommand}" CommandParameter="3">
52                         <Border FocusVisualStyle="{x:Null}" BorderThickness="0" CornerRadius="2">
53                             <TextBlock FocusVisualStyle="{x:Null}" Text="医保号" FontFamily="Microsoft YaHei" FontSize="12" ></TextBlock>
54                         </Border>
55                     </Button>
56                 </StackPanel>
57             </Grid>
58         </Popup>
59     </Grid>
View Code

 

转载于:https://www.cnblogs.com/A1AA/p/4985768.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值