軟件界面設計

<UserControl xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
             x:Class="FilesManagement.FilesReport"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:quick="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
             xmlns:Local="clr-namespace:FilesManagement"
             xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
             xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
             mc:Ignorable="d"  Loaded="UserControl_Loaded"
             d:DesignHeight="500" d:DesignWidth="700">
    <UserControl.Resources>
        <Local:MyImageConverter x:Key="ImageDataConverter"></Local:MyImageConverter>
        <Local:DateConverter x:Key="DateConverter"></Local:DateConverter>
        <telerik:BinaryImageConverter x:Key="binaryImageConverter" />
        <DataTemplate x:Key="DatailCoreTemplate">
            <dx:MeasurePixelSnapper>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="12"></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <dxe:ImageEdit HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Path=Row.picture,
                        Converter={StaticResource ResourceKey=binaryImageConverter}}" Grid.Column="0" Height="100" Width="100"
                                  Margin="15"  ShowMenu="False">
                    </dxe:ImageEdit>
                    <Grid Grid.Column="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="12"></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right" Text="文件名稱:"></TextBlock>
                        <TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right" Text="文件類型:"></TextBlock>
                        <TextBlock Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right" Text="文件大小(K):"></TextBlock>
                        <TextBlock Grid.Column="0" Grid.Row="3" HorizontalAlignment="Right" Text="時間日期:"></TextBlock>
                        <TextBlock Grid.Column="0" Grid.Row="4" HorizontalAlignment="Right" Text="備註信息:"></TextBlock>                       
                        <TextBlock Grid.Column="2" Grid.Row="0" Text="{Binding Row.Name}"></TextBlock>
                        <TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding Row.fileType}"></TextBlock>
                        <TextBlock Grid.Column="2" Grid.Row="2" Text="{Binding Row.fileSize}"></TextBlock>
                        <TextBlock Grid.Column="2" Grid.Row="3" Text="{Binding Row.fileTime, Converter={StaticResource ResourceKey=DateConverter }}" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Grid.Column="2" Grid.Row="4" Text="{Binding Row.Remarks}" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
                       
                    </Grid>                   
                </Grid>
            </dx:MeasurePixelSnapper>
        </DataTemplate>

        <ControlTemplate x:Key="detailContainerTemplate" TargetType="{x:Type ContentControl}">
            <Border BorderThickness="0,1,0,0" BorderBrush="{TemplateBinding BorderBrush}" HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" Padding="12" Background="{TemplateBinding Background}">
                <ContentPresenter></ContentPresenter>
            </Border>
        </ControlTemplate>

        <DataTemplate x:Key="expandableRowDetailTemplate">
            <StackPanel Orientation="Vertical">
                <dx:MeasurePixelSnapper>
                    <ContentPresenter x:Name="defaultRowPresenter" Content="{Binding}"
                                      ContentTemplate="{Binding View.DefaultDataRowTemplate}">
                    </ContentPresenter>
                </dx:MeasurePixelSnapper>
                <dx:DXExpander IsExpanded="{Binding Path=IsSelected}" HorizontalExpand="None" VerticalExpand="FromTopToBottom">
                    <ContentControl Template="{StaticResource ResourceKey=detailContainerTemplate}"  Content="{Binding}"
                                    ContentTemplate="{DynamicResource ResourceKey=DatailCoreTemplate}">
                    </ContentControl>
                </dx:DXExpander>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <Grid Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="48"></RowDefinition>
        </Grid.RowDefinitions>

        <dxg:GridControl HorizontalAlignment="Stretch" Name="gridList" VerticalAlignment="Stretch" FontSize="16" ShowBorder="True"
                         dx:ThemeManager.ThemeName="Office2007Black" UseLayoutRounding="False">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="Name" Header="文件名稱"></dxg:GridColumn>
                <dxg:GridColumn FieldName="fileType" Header="文件類型"></dxg:GridColumn>
                <dxg:GridColumn FieldName="fileSize" Header="文件大小"></dxg:GridColumn>
                <dxg:GridColumn FieldName="fileTime" Header="時間日期"></dxg:GridColumn>
                <dxg:GridColumn FieldName="Remarks" Header="備註信息"></dxg:GridColumn>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView Name="tableView" DataRowTemplate="{DynamicResource ResourceKey=expandableRowDetailTemplate}"
                               AllowEditing="False" NavigationStyle="Row" FontSize="16" AutoWidth="False" ShowGroupPanel="True"
                               ShowFilterPanelMode="Default" ShowGroupedColumns="True" ShowAutoFilterRow="True">
                   
                </dxg:TableView>
            </dxg:GridControl.View>
        </dxg:GridControl>
               
        <StackPanel HorizontalAlignment="Left" Margin="0" Grid.Row="1" Orientation="Horizontal" Grid.RowSpan="2">
            <telerik:RadButton Height="46" HorizontalAlignment="Right" Margin="0,2,1,0" Name="btnAdd" Width="107" Grid.Row="2" Cursor="Hand"
                               Foreground="#FF9FD2F3" BorderThickness="1" Click="btnAdd_Click">
                <telerik:RadButton.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Gainsboro" Offset="0.5"/>
                        <GradientStop Color="#FFD4D4D4" Offset="1"/>
                    </LinearGradientBrush>
                </telerik:RadButton.Background>
                <telerik:RadButton.Content>
                    <StackPanel Orientation="Horizontal" Margin="4" Width="92.764">
                        <TextBlock Text="增加" Margin="1" FontFamily="WenQuanYi Micro Hei" FontSize="28" Height="30" Width="56.333"
                                   TextAlignment="Left" Background="{x:Null}" Foreground="Black" ForceCursor="True" />
                        <Image  Height="32" Width="32" Margin="1,0,0,0" />
                    </StackPanel>
                </telerik:RadButton.Content>
            </telerik:RadButton>

            <telerik:RadButton Height="46" HorizontalAlignment="Right" Margin="0,2,1,0" Name="btnDelete" Grid.Row="2" Foreground="#FF9FD2F3"
                               Cursor="Hand" BorderThickness="1" Width="107" Click="btnDelete_Click">
                <telerik:RadButton.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Gainsboro" Offset="0.5"/>
                        <GradientStop Color="#FFD4D4D4" Offset="1"/>
                    </LinearGradientBrush>
                </telerik:RadButton.Background>
                <telerik:RadButton.Content>
                    <StackPanel Orientation="Horizontal" Margin="4" Width="92.764">
                        <TextBlock Text="刪除" Margin="1" FontFamily="WenQuanYi Micro Hei" FontSize="28" Height="30" Width="56.333"
                                   TextAlignment="Left" Background="{x:Null}" Foreground="Black" ForceCursor="True" />
                        <Image Height="32" Width="32" Margin="1,0,0,0" />
                    </StackPanel>
                </telerik:RadButton.Content>
            </telerik:RadButton>

            <telerik:RadButton Height="46" Name="btnUpdate" Margin="0,2,0,0" Grid.Row="2" Foreground="#FF9FD2F3" Cursor="Hand"
                               BorderThickness="1" HorizontalAlignment="Right" Width="107" >
                <telerik:RadButton.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Gainsboro" Offset="0.5"/>
                        <GradientStop Color="#FFD4D4D4" Offset="1"/>
                    </LinearGradientBrush>
                </telerik:RadButton.Background>
                <telerik:RadButton.Content>
                    <StackPanel Orientation="Horizontal" Margin="4" Width="92.764">
                        <TextBlock Text="編輯" Margin="1" FontFamily="WenQuanYi Micro Hei" FontSize="28" Height="30"
                                   Width="56.333" TextAlignment="Left" Background="{x:Null}" Foreground="Black" ForceCursor="True" />
                        <Image Height="32" Width="32" Margin="1,0,0,0" />
                    </StackPanel>
                </telerik:RadButton.Content>
            </telerik:RadButton>
           
            <telerik:RadButton Height="46" Name="btnLook" Margin="0,2,0,0" Grid.Row="2" Foreground="#FF9FD2F3" Cursor="Hand"
                               BorderThickness="1" HorizontalAlignment="Right" Width="107">
                <telerik:RadButton.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0"></GradientStop>
                        <GradientStop Color="Gainsboro" Offset="0.5"></GradientStop>
                        <GradientStop Color="#FFD4D4D4" Offset="1"></GradientStop>
                    </LinearGradientBrush>
                </telerik:RadButton.Background>
                <telerik:RadButton.Content>
                    <StackPanel Orientation="Horizontal" Margin="4" Width="93">
                        <TextBlock Text="查看" Margin="1" FontFamily="WenQuanYi Micro Hei" FontSize="28" Height="30" Width="56.33" TextAlignment="Left"
                                   Foreground="Black" ForceCursor="True"></TextBlock>
                        <Image Height="32" Width="32" Margin="1,0,0,0"></Image>
                    </StackPanel>
                </telerik:RadButton.Content>
            </telerik:RadButton>

        </StackPanel>

    </Grid>
</UserControl>