ItemsControl 使用举例

zhangyuli1

于 2024-08-23 11:04:18 发布

阅读量27

点赞数

分类专栏： wpf 自定义控件集合文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/zhang8593/article/details/141460634

版权

wpf 自定义控件集合专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先上效果图：后面是实现和样式代码

 <GroupBox Header="项目列表" Grid.Row="1" Margin="10,20,0,0">
     <ItemsControl Margin="0,45,0,0">
         <ItemsControl.ItemsSource>
             <x:Array Type="sys:String">
                 <sys:String>项目1</sys:String>
                 <sys:String>项目2</sys:String>
                 <sys:String>项目3</sys:String>
                 <sys:String>项目4</sys:String>
                 <sys:String>项目5</sys:String>
                 <sys:String>项目6</sys:String>
             </x:Array>
         </ItemsControl.ItemsSource>

         <ItemsControl.ItemTemplate>
             <DataTemplate>
                 <Grid>
                     <!--第一种情况-->
                     <Grid Margin="5" Name="state1" Visibility="Collapsed">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="40"/>
                             <RowDefinition Height="auto"/>
                             <RowDefinition Height="auto"/>
                             <RowDefinition/>
                         </Grid.RowDefinitions>
                         <Border Background="#F1F4FF" Grid.RowSpan="4" CornerRadius="5"/>
                         <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"
                              Margin="10,0">
                             <Border Width="18" Height="18" CornerRadius="5" Background="#5966F3">
                                 <TextBlock Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"
                                     Foreground="White"/>
                             </Border>
                             <TextBlock Text="{Binding}" VerticalAlignment="Center" Margin="10,0"/>
                         </StackPanel>
                         <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right"
                              Margin="10,0" FontSize="10">
                      <Run Text="进度83%" Foreground="#999"/>
                      <Run Text="还剩52天" Foreground="#5966F3" FontWeight="Thin"/>
                         </TextBlock>


                         <ProgressBar Height="3" Foreground="#5966F3" Background="#CDD1E2" Grid.Row="1"
                               Margin="10,3" Value="45"/>
                         <TextBlock Text="20230927" Foreground="#DDD" HorizontalAlignment="Left" 
                             Grid.Row="2" FontSize="10" Margin="10,0"/>
                         <TextBlock Text="20230927" Foreground="#DDD" HorizontalAlignment="Right" 
                             Grid.Row="2" FontSize="10" Margin="10,0"/>

                         <Grid Grid.Row="3" Margin="10,0">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="auto"/>
                                 <ColumnDefinition/>
                                 <ColumnDefinition Width="auto"/>
                             </Grid.ColumnDefinitions>
                             <lvc:Gauge Margin="10" Width="40" Height="40"
                                 Uses360Mode="True" LabelsVisibility="Collapsed"
                                 From="0" To="100" Value="81" Foreground="#5665F8">
                                 <lvc:Gauge.GaugeRenderTransform>
                                     <RotateTransform Angle="90"/>
                                 </lvc:Gauge.GaugeRenderTransform>
                             </lvc:Gauge>
                             <StackPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left">
                                 <TextBlock Text="项目进度" Foreground="#999" FontSize="11" Margin="0,3"/>
                                 <TextBlock Text="81%" FontSize="14" Margin="0,3"/>
                             </StackPanel>
                             <StackPanel Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
                                 <TextBlock Text="下一项任务" Foreground="#999" FontSize="11" HorizontalAlignment="Right" Margin="0,3"/>
                                 <TextBlock Text="各部门进行协调" FontSize="12" Margin="0,3"/>
                             </StackPanel>
                         </Grid>
                     </Grid>


                     <Grid Margin="5" Name="state2" Height="30">
                         <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"
                              Margin="10,0">
                             <Border Width="18" Height="18" CornerRadius="5" Background="#5966F3">
                                 <TextBlock Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"
                                     Foreground="White"/>
                             </Border>
                             <TextBlock Text="{Binding}" VerticalAlignment="Center" Margin="10,0"/>
                         </StackPanel>
                         <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right"
                              Margin="10,0" FontSize="10">
                             <Run Text="进度83%" Foreground="#999"/>
                             <Run Text="还剩52天" Foreground="#5966F3" FontWeight="Thin"/>
                         </TextBlock>
                     </Grid>
                 </Grid>
                 <DataTemplate.Triggers>
                     <DataTrigger Binding="{Binding}" Value="项目2">
                         <Setter TargetName="state1" Property="Visibility" Value="Visible"/>
                         <Setter TargetName="state2" Property="Visibility" Value="Collapsed"/>
                     </DataTrigger>
                 </DataTemplate.Triggers>
             </DataTemplate>
         </ItemsControl.ItemTemplate>
     </ItemsControl>
 </GroupBox>

<Application x:Class="ZGR.Databoard.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ZGR.Databoard"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--  定义字体-->
        <FontFamily x:Key="Iconfont">Assets/Fonts/iconfont.ttf#iconfont</FontFamily>

        <Style TargetType="GroupBox" x:Key="GroupBoxStyle">
            <Setter Property="Margin" Value="10"></Setter>
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="GroupBox" >
                        <Border BorderBrush="#ddd" BorderThickness="1" CornerRadius="5" Background="#DDFBFAFD" >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="45"></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>
                                <TextBlock  FontWeight="Bold" Foreground="#11135A" FontSize="14"  Margin="20,0" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{TemplateBinding Header}">
                                    <TextBlock.Effect>
                                        <DropShadowEffect  Direction="270" ShadowDepth="8" BlurRadius="20"  Color="#5766F6" Opacity="0.3"></DropShadowEffect>
                                    </TextBlock.Effect>
                                 <Border Height="2" Background="#DDD" VerticalAlignment="Bottom" ></Border>
                                </TextBlock>
                                <ContentPresenter Grid.RowSpan="2"></ContentPresenter>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    </Application.Resources>
</Application>