思路: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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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>