listbox动态选择模版

2016-10-08 20:08:13来源:CSDN作者:ff1990723人点击

献上效果图:

预期效果

1)Listbox动态选择模版

2)鼠标移上去后显示操作按钮


模版实现

(FButton请参考 Fbutton模版

1.加号模版

 <span style="font-size:14px;"> <ControlTemplate x:Key="AddNewTemplate" TargetType="{x:Type ListBoxItem}">        <Border x:Name="Border"                BorderThickness="0"                CornerRadius="5"                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">            <Border.Background>                <ImageBrush ImageSource="/Management;component/Images/mohmoo/bg_card.png" />            </Border.Background>            <!--<Grid Width="{TemplateBinding Width}"                  Height="{TemplateBinding Height}"                  ShowGridLines="True">                <Grid.ColumnDefinitions>                    <ColumnDefinition Width="30" />                    <ColumnDefinition Width="auto" />                    <ColumnDefinition Width="30" />                </Grid.ColumnDefinitions>-->            <local:FButton Width="{TemplateBinding Width}"                           Height="{TemplateBinding Height}"                           HorizontalAlignment="Center"                           VerticalContentAlignment="Center"                           Background="Transparent"                           Command="{Binding AddClickCommand}"                           FIcon="&#xe604;"                           FIconSize="70"                           Foreground="#0068FD"                           MouseOverBackground="Transparent"                           MouseOverForeground="Red"                           PressedBackground="Transparent"                           Template="{StaticResource FButton_Template}" />            <!--</Grid>-->        </Border>        <ControlTemplate.Triggers>            <Trigger Property="IsMouseOver" Value="True">                <Setter TargetName="Border" Property="BorderThickness" Value="2" />                <Setter TargetName="Border" Property="BorderBrush" Value="#24A6CA" />            </Trigger>            <Trigger Property="IsEnabled" Value="False">                <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />            </Trigger>        </ControlTemplate.Triggers>    </ControlTemplate></span>

2.名片模版

<ControlTemplate x:Key="CardTemplate" TargetType="{x:Type ListBoxItem}">        <Border x:Name="Border"                BorderThickness="0"                CornerRadius="5"                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">            <Border.Background>                <ImageBrush ImageSource="/Management;component/Images/mohmoo/bg_card.png" />            </Border.Background>            <Grid Margin="1">                <Grid Background="Transparent">                    <Grid.RowDefinitions>                        <RowDefinition Height="50" />                        <RowDefinition Height="50" />                        <RowDefinition Height="*" />                        <!--<RowDefinition Height="40" />-->                    </Grid.RowDefinitions>                    <Grid.ColumnDefinitions>                        <ColumnDefinition Width="30" />                        <ColumnDefinition Width="50" />                        <ColumnDefinition Width=".5*" />                        <ColumnDefinition Width="*" />                    </Grid.ColumnDefinitions>                    <!--  Region 名称、编号  -->                    <TextBlock Grid.Row="0"                               Grid.Column="1"                               HorizontalAlignment="Left"                               VerticalAlignment="Bottom"                               FontFamily="{TemplateBinding FontFamily}"                               FontSize="{TemplateBinding FontSize}"                               Foreground="{TemplateBinding Foreground}"                               Text="名称:" />                    <TextBlock Grid.Row="0"                               Grid.Column="2"                               HorizontalAlignment="Left"                               VerticalAlignment="Bottom"                               FontFamily="{TemplateBinding FontFamily}"                               FontSize="{TemplateBinding FontSize}"                               Foreground="{TemplateBinding Foreground}"                               Text="{Binding Name}" />                    <TextBlock Grid.Row="1"                               Grid.Column="1"                               HorizontalAlignment="Left"                               VerticalAlignment="Bottom"                               FontFamily="{TemplateBinding FontFamily}"                               FontSize="{TemplateBinding FontSize}"                               Foreground="{TemplateBinding Foreground}"                               Text="编号:" />                    <TextBlock Grid.Row="1"                               Grid.Column="2"                               HorizontalAlignment="Left"                               VerticalAlignment="Bottom"                               FontFamily="{TemplateBinding FontFamily}"                               FontSize="{TemplateBinding FontSize}"                               Foreground="{TemplateBinding Foreground}"                               Text="{Binding Sequence}" />                    <!--  EndRegion  -->                    <WrapPanel Grid.Row="2"                               Grid.Column="1"                               Grid.ColumnSpan="3"                               Margin="0 0 0 30"                               HorizontalAlignment="Left"                               VerticalAlignment="Bottom">                        <TextBlock HorizontalAlignment="Left"                                   VerticalAlignment="Bottom"                                   FontFamily="{TemplateBinding FontFamily}"                                   FontSize="40"                                   Foreground="#0E72FD"                                   Text="{Binding RoomID}" />                        <WrapPanel Margin="20 0 0 7"                                   HorizontalAlignment="Left"                                   VerticalAlignment="Bottom">                            <TextBlock VerticalAlignment="Bottom"                                       FontFamily="{TemplateBinding FontFamily}"                                       FontSize="{TemplateBinding FontSize}"                                       Foreground="{TemplateBinding Foreground}"                                       Text="房" />                            <TextBlock VerticalAlignment="Bottom"                                       FontFamily="{TemplateBinding FontFamily}"                                       FontSize="{TemplateBinding FontSize}"                                       Foreground="{TemplateBinding Foreground}"                                       Text="{Binding UnitID}" />                            <TextBlock VerticalAlignment="Bottom"                                       FontFamily="{TemplateBinding FontFamily}"                                       FontSize="{TemplateBinding FontSize}"                                       Foreground="{TemplateBinding Foreground}"                                       Text="单元" />                            <TextBlock VerticalAlignment="Bottom"                                       FontFamily="{TemplateBinding FontFamily}"                                       FontSize="{TemplateBinding FontSize}"                                       Foreground="{TemplateBinding Foreground}"                                       Text="{Binding BuildID}" />                            <TextBlock VerticalAlignment="Bottom"                                       FontFamily="{TemplateBinding FontFamily}"                                       FontSize="{TemplateBinding FontSize}"                                       Foreground="{TemplateBinding Foreground}"                                       Text="栋" />                            <TextBlock VerticalAlignment="Bottom"                                       FontFamily="{TemplateBinding FontFamily}"                                       FontSize="{TemplateBinding FontSize}"                                       Foreground="{TemplateBinding Foreground}"                                       Text="{Binding AreaID}" />                            <TextBlock VerticalAlignment="Bottom"                                       FontFamily="{TemplateBinding FontFamily}"                                       FontSize="{TemplateBinding FontSize}"                                       Foreground="{TemplateBinding Foreground}"                                       Text="区" />                        </WrapPanel>                    </WrapPanel>                </Grid>                <Canvas x:Name="maskCanvas"                        Background="#F3F2F4"                        Visibility="Collapsed">                    <Grid Width="300"                          Height="50"                          Margin="50">                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width=".2*" />                            <ColumnDefinition Width=".3*" />                            <ColumnDefinition Width=".3*" />                            <ColumnDefinition Width=".2*" />                        </Grid.ColumnDefinitions>                        <local:FButton Grid.Column="1"                                       Width="50"                                       Height="50"                                       Background="Transparent"                                       Command="{Binding EditClickCommand}"                                       FIcon="&#xe609;"                                       FIconSize="31"                                       Foreground="Black"                                       MouseOverBackground="Transparent"                                       MouseOverForeground="Red"                                       PressedBackground="Transparent"                                       Template="{StaticResource FButton_Template}" />                        <local:FButton Grid.Column="2"                                       Width="50"                                       Height="50"                                       Background="Transparent"                                       Command="{Binding DeleteClickCommand}"                                       FIcon="&#xe601;"                                       FIconSize="32"                                       Foreground="Black"                                       MouseOverBackground="Transparent"                                       MouseOverForeground="Red"                                       Padding="0 0 0 3"                                       PressedBackground="Transparent"                                       Template="{StaticResource FButton_Template}" />                    </Grid>                </Canvas>            </Grid>        </Border>        <ControlTemplate.Triggers>            <Trigger Property="IsSelected" Value="True">                <Setter TargetName="Border" Property="BorderThickness" Value="2" />                <Setter TargetName="Border" Property="BorderBrush" Value="#24A6CA" />            </Trigger>            <Trigger Property="IsMouseOver" Value="True">                <Setter TargetName="maskCanvas" Property="Visibility" Value="Visible" />                <Setter TargetName="Border" Property="BorderThickness" Value="2" />                <Setter TargetName="Border" Property="BorderBrush" Value="#24A6CA" />            </Trigger>            <Trigger Property="IsEnabled" Value="False">                <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />            </Trigger>        </ControlTemplate.Triggers>    </ControlTemplate>

3.ListboxItem模版

<Style x:Key="DefaultListBoxItem" TargetType="{x:Type ListBoxItem}">        <Setter Property="Foreground" Value="Black" />        <Setter Property="FontFamily" Value="黑体" />        <Setter Property="HorizontalContentAlignment" Value="Stretch" />        <!--<Setter Property="VerticalContentAlignment" Value="Center" />-->        <Setter Property="Height" Value="190" />        <Setter Property="Width" Value="370" />        <Setter Property="Margin" Value="2" />        <Setter Property="Background" Value="Transparent" />        <Setter Property="SnapsToDevicePixels" Value="True" />        <Setter Property="Foreground" Value="Black" />        <Setter Property="FontFamily" Value="黑体" />        <Setter Property="FontSize" Value="20" />        <Setter Property="Template" Value="{DynamicResource CardTemplate}" />        <Style.Triggers>            <DataTrigger Binding="{Binding flag}" Value="1">                <Setter Property="Template" Value="{DynamicResource CardTemplate}" />            </DataTrigger>            <DataTrigger Binding="{Binding flag}" Value="0">                <Setter Property="Template" Value="{DynamicResource AddNewTemplate}" />            </DataTrigger>        </Style.Triggers>    </Style>

4.ListBox模版

 <Style x:Key="DefaultListBox" TargetType="{x:Type ListBox}">        <Setter Property="Background" Value="White" />        <Setter Property="BorderThickness" Value="0" />        <Setter Property="ItemContainerStyle" Value="{StaticResource DefaultListBoxItem}" />        <Setter Property="SnapsToDevicePixels" Value="True" />        <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="False" />        <Setter Property="ItemsPanel">            <Setter.Value>                <ItemsPanelTemplate>                    <WrapPanel />                </ItemsPanelTemplate>            </Setter.Value>        </Setter>        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type ListBox}">                    <Border Name="Border"                            Background="{TemplateBinding Background}"                            BorderThickness="{TemplateBinding BorderThickness}">                        <ScrollViewer HorizontalScrollBarVisibility="Disabled">                            <ItemsPresenter />                        </ScrollViewer>                    </Border>                    <ControlTemplate.Triggers>                        <Trigger Property="IsEnabled" Value="False">                            <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />                        </Trigger>                    </ControlTemplate.Triggers>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

5.数据模版

  public class ResidentCardInfo    {        public RelayCommand EditClickCommand { get; private set; }        public RelayCommand DeleteClickCommand { get; private set; }        public RelayCommand AddClickCommand { get; private set; }        public string Name { get; set; }        public int flag { get; set; }        public string Sequence { get; set; }        public string RoomID { get; set; }        public string UnitID { get; set; }        public string BuildID { get; set; }        public string AreaID { get; set; }        public ResidentCardInfo()        {            flag = 1;            EditClickCommand = new  RelayCommand(() => { MessageBox.Show("EditClickCommand"); });            DeleteClickCommand = new RelayCommand(() => { MessageBox.Show("DeleteClickCommand"); });            AddClickCommand = new RelayCommand(() => { MessageBox.Show("AddClickCommand"); });        }

6.在页面的引用

        <ListBox x:Name="itemsCtrl"                 Grid.Row="2"                 Margin="20 0 0 10"                 HorizontalAlignment="Stretch"                 Style="{StaticResource DefaultListBox}" />

codeBehind:

 public ResidentsPage()        {            InitializeComponent();            itemsCtrl.ItemsSource = new List<ResidentCardInfo>()            {                new ResidentCardInfo () {flag=0 },                new ResidentCardInfo () { Name="费劲死了",Sequence="12558992",RoomID="405",UnitID="2",BuildID="1",AreaID="1"},                new ResidentCardInfo () { Name="放假了",Sequence="787564",RoomID="1312",UnitID="2",BuildID="2",AreaID="3"},                new ResidentCardInfo () { Name="无人陪外婆",Sequence="12312",RoomID="113",UnitID="2",BuildID="2",AreaID="1"},                new ResidentCardInfo () { Name="是理论上",Sequence="888",RoomID="778",UnitID="3",BuildID="3",AreaID="3"},                new ResidentCardInfo () { Name="我日晚",Sequence="3533890",RoomID="617",UnitID="4",BuildID="5",AreaID="2"},                new ResidentCardInfo () { Name="分身乏术",Sequence="2424222",RoomID="314",UnitID="5",BuildID="6",AreaID="2"},                new ResidentCardInfo () { Name="啪啪啪",Sequence="9760472",RoomID="122",UnitID="5",BuildID="7",AreaID="2"},                new ResidentCardInfo () { Name="我呸",Sequence="764",RoomID="445",UnitID="2",BuildID="2",AreaID="4"},                new ResidentCardInfo () { Name="给对方",Sequence="3322789",RoomID="302",UnitID="8",BuildID="1",AreaID="1"},                new ResidentCardInfo () { Name="怕是翻盘",Sequence="5353",RoomID="207",UnitID="8",BuildID="2",AreaID="4"},                new ResidentCardInfo () { Name="哦我",Sequence="78433",RoomID="105",UnitID="6",BuildID="2",AreaID="1"},                 new ResidentCardInfo () { Name="啪啪啪",Sequence="9760472",RoomID="122",UnitID="5",BuildID="7",AreaID="2"},                new ResidentCardInfo () { Name="我呸",Sequence="764",RoomID="445",UnitID="2",BuildID="2",AreaID="4"},                new ResidentCardInfo () { Name="给对方",Sequence="3322789",RoomID="302",UnitID="8",BuildID="1",AreaID="1"},                new ResidentCardInfo () { Name="怕是翻盘",Sequence="5353",RoomID="207",UnitID="8",BuildID="2",AreaID="4"},                new ResidentCardInfo () { Name="哦我",Sequence="78433",RoomID="105",UnitID="6",BuildID="2",AreaID="1"},                 new ResidentCardInfo () { Name="啪啪啪",Sequence="9760472",RoomID="122",UnitID="5",BuildID="7",AreaID="2"},                new ResidentCardInfo () { Name="我呸",Sequence="764",RoomID="445",UnitID="2",BuildID="2",AreaID="4"},                new ResidentCardInfo () { Name="给对方",Sequence="3322789",RoomID="302",UnitID="8",BuildID="1",AreaID="1"},                new ResidentCardInfo () { Name="怕是翻盘",Sequence="5353",RoomID="207",UnitID="8",BuildID="2",AreaID="4"},                new ResidentCardInfo () { Name="哦我",Sequence="78433",RoomID="105",UnitID="6",BuildID="2",AreaID="1"}            };        }




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台