line-edge-screen-wpf/Client/RIZO.Client.BaseModule/Views/UserManagementView.xaml

<UserControl x:Class="RIZO.Client.BaseModule.Views.UserManagementView"
             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:local="clr-namespace:RIZO.Client.BaseModule"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/RIZO.Client.Assets;component/Styles/BaseResources.xaml"/>
                <ResourceDictionary Source="/RIZO.Client.Assets;component/Styles/ButtonStyles.xaml"/>
                <ResourceDictionary Source="/RIZO.Client.Assets;component/Styles/TextBoxStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Border BorderBrush="#DDD" BorderThickness="0,0,0,1"/>
        <TextBox Text="" VerticalAlignment="Center" Width="300" HorizontalAlignment="Left" 
                 Style="{DynamicResource SearchTextBoxStyle}"/>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Content="Refresh" Style="{StaticResource NormalButtonStyle}" Background="#FF0ABEFF" 
                    Width="70" Margin="5,0"
                    Command="{Binding RefreshCommand}"/>
            <Button Content="Add" 
                Style="{StaticResource IconWithContentButtonStyle}" Width="100"
                Tag="&#xe603;" Background="#FFF05005"
                Command="{Binding AddCommand}"/>
        </StackPanel>
        
        
        <!--DataGrid-->

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <!--Table Header-->
            <Border Background="#EEE"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="150"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="No." VerticalAlignment="Center" HorizontalAlignment="Center"/>
                <TextBlock Text="Avatar" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                <TextBlock Text="User Information" Grid.Column="2" VerticalAlignment="Center" />
                <TextBlock Text="Role" Grid.Column="3" VerticalAlignment="Center" />
                <TextBlock Text="Operation" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
            
            <!--Table Body-->
            <!--List<UserModel> UserList-->
            <ItemsControl Grid.Row="1" ItemsSource="{Binding UserList}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Name="root">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition Width="120"/>
                                <ColumnDefinition Width="2*"/>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="150"/>
                            </Grid.ColumnDefinitions>
                            <Border BorderBrush="#EEE" BorderThickness="0,0,0,1"
                                    Grid.ColumnSpan="10" SnapsToDevicePixels="True"/>

                            <TextBlock Text="{Binding Index}" VerticalAlignment="Center" HorizontalAlignment="Center"/>

                            <Border Grid.Column="1" Width="40" Height="40" CornerRadius="20" BorderBrush="White" BorderThickness="2">
                                <Border.Effect>
                                    <DropShadowEffect BlurRadius="10" ShadowDepth="0" Direction="0" Color="Gray" Opacity="0.3"/>
                                </Border.Effect>
                                <Border.Background>
                                    <ImageBrush ImageSource="{Binding UserIcon}"/>
                                </Border.Background>
                            </Border>

                            <StackPanel Grid.Column="2" Margin="0,10">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding RealName}" VerticalAlignment="Center"/>
                                    <TextBlock Text="State: Valid" FontSize="11" Foreground="#888" VerticalAlignment="Center" Margin="10,0"/>
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding UserName}" Foreground="#888"/>
                                    <TextBlock Text="{Binding Age}" Foreground="#888" Margin="10,0"/>
                                </StackPanel>
                                <TextBlock>
                                    <Run Text="["/>
                                    <Hyperlink Command="{Binding PwdCommand}" CommandParameter="{Binding UserId}">Reset Password</Hyperlink>
                                    <Run Text="]"/>
                                </TextBlock>
                            </StackPanel>

                            <StackPanel Grid.Column="3" VerticalAlignment="Center">
                                <ItemsControl ItemsSource="{Binding Roles}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <WrapPanel/>
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding RoleName}" Margin="3"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                                <TextBlock HorizontalAlignment="Left" Margin="0,5,0,0">
                                    <Run Text="["/>
                                    <Hyperlink Command="{Binding RoleCommand}" CommandParameter="{Binding}">Reset Role</Hyperlink>
                                    <Run Text="]"/>
                                </TextBlock>
                            </StackPanel>

                            <StackPanel Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Horizontal">
                                <TextBlock Margin="3,0">
                                    <Hyperlink Command="{Binding EditCommand}" CommandParameter="{Binding}">Edit</Hyperlink>
                                </TextBlock>
                                <TextBlock Margin="3,0">
                                    <Hyperlink Command="{Binding DeleteCommand}" CommandParameter="{Binding}">Delete</Hyperlink>
                                </TextBlock>
                            </StackPanel>

                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
        
        
    </Grid>
</UserControl>