downkyi/DownKyi/Views/ViewUserSpace.xaml

<UserControl
    x:Class="DownKyi.Views.ViewUserSpace"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:prism="http://prismlibrary.com/"
    prism:ViewModelLocator.AutoWireViewModel="True">
    <UserControl.Resources>
        <Style x:Key="TabLeftBannerStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <StackPanel
                            x:Name="panel"
                            Margin="10,0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Cursor="Hand">
                            <StackPanel Margin="0,0,0,5" Orientation="Horizontal">
                                <TextBlock Padding="5,0">
                                    <ContentControl
                                        Width="20"
                                        Height="20"
                                        VerticalAlignment="Center">
                                        <Path
                                            Width="20"
                                            Height="20"
                                            Data="{Binding Icon.Data}"
                                            Fill="{Binding IconColor}"
                                            Stretch="Uniform" />
                                    </ContentControl>
                                </TextBlock>

                                <TextBlock
                                    Name="nameText"
                                    Padding="5,0"
                                    VerticalAlignment="Center"
                                    FontSize="14"
                                    Text="{Binding Title}" />
                            </StackPanel>

                            <TextBlock
                                Name="nameIndicator"
                                Height="1.5"
                                Background="{DynamicResource BrushPrimary}" />
                        </StackPanel>

                        <ControlTemplate.Triggers>
                            <Trigger Property="Selector.IsSelected" Value="False">
                                <Setter TargetName="nameText" Property="Foreground" Value="{DynamicResource BrushTextDark}" />
                                <Setter TargetName="nameIndicator" Property="Visibility" Value="Hidden" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="nameText" Property="Foreground" Value="{DynamicResource BrushPrimary}" />
                            </Trigger>
                            <Trigger Property="Selector.IsSelected" Value="True">
                                <Setter TargetName="nameText" Property="Foreground" Value="{DynamicResource BrushPrimary}" />
                                <Setter TargetName="nameIndicator" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="TabRightBannerStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <StackPanel
                            x:Name="panel"
                            Margin="15,0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Cursor="Hand"
                            IsEnabled="{Binding IsEnabled}">
                            <TextBlock
                                Name="nameLabel"
                                Padding="0,0,0,5"
                                HorizontalAlignment="Center"
                                Foreground="{DynamicResource BrushTextGrey2}"
                                Text="{Binding Label}" />
                            <TextBlock
                                Name="nameCount"
                                Padding="0,0,0,0"
                                HorizontalAlignment="Center"
                                Foreground="{DynamicResource BrushTextDark}"
                                Text="{Binding Count}" />
                        </StackPanel>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="nameLabel" Property="Foreground" Value="{Binding LabelColor}" />
                                <Setter TargetName="nameCount" Property="Foreground" Value="{Binding CountColor}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="TabBannerStyle" TargetType="{x:Type ListBox}">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <Border
                            x:Name="Bd"
                            Padding="0"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ScrollViewer Focusable="False">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Grid>
        <Grid Visibility="{Binding ViewVisibility}">
            <Grid.RowDefinitions>
                <RowDefinition Height="300" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Image
                Grid.Row="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Source="{Binding Background}"
                Stretch="UniformToFill" />

            <Grid Grid.Row="0" VerticalAlignment="Bottom">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Image
                    Grid.Column="0"
                    Width="64"
                    Height="64"
                    Source="{Binding Header}">
                    <Image.Clip>
                        <!--  设置图像如何显示  -->
                        <EllipseGeometry
                            Center="32,32"
                            RadiusX="32"
                            RadiusY="32" />
                    </Image.Clip>
                </Image>
                <!--  添加一个圆框在头像上，做边框  -->
                <Ellipse
                    Grid.Column="0"
                    Width="66"
                    Height="66"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Stroke="{DynamicResource BrushImageBorder2}"
                    StrokeThickness="2" />

                <Grid Grid.Column="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <StackPanel
                        Grid.Row="0"
                        VerticalAlignment="Center"
                        Orientation="Horizontal">
                        <TextBlock
                            FontSize="20"
                            FontWeight="Bold"
                            Foreground="{DynamicResource BrushText}"
                            Text="{Binding UserName}" />
                        <Image
                            Width="18"
                            Height="18"
                            Margin="5,0,0,0"
                            Source="{Binding Sex}" />
                        <Image
                            Width="28"
                            Height="16"
                            Margin="5,0,0,0"
                            Source="{Binding Level}" />
                        <Border
                            Height="17"
                            Margin="5,0,0,0"
                            Padding="5,0"
                            Background="{DynamicResource BrushSecond}"
                            CornerRadius="3"
                            Visibility="{Binding VipTypeVisibility}">
                            <TextBlock
                                VerticalAlignment="Center"
                                FontSize="10"
                                Foreground="{DynamicResource BrushText}"
                                Text="{Binding VipType}" />
                        </Border>
                    </StackPanel>

                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>

                        <TextBlock
                            Grid.Column="0"
                            VerticalAlignment="Center"
                            FontSize="14"
                            Foreground="{DynamicResource BrushText}"
                            Text="{Binding Sign}" />

                        <Border
                            Grid.Column="1"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Background="{DynamicResource BrushMask}"
                            BorderBrush="{DynamicResource BrushImageBorder2}"
                            BorderThickness="2"
                            CornerRadius="5">
                            <TextBlock
                                Padding="8,3"
                                VerticalAlignment="Center"
                                FontSize="16"
                                Foreground="{DynamicResource BrushBackground}"
                                Text="{Binding IsFollowed}" />
                        </Border>
                    </Grid>
                </Grid>
            </Grid>

            <!--  内容  -->
            <Grid Grid.Row="1" Visibility="{Binding ContentVisibility}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="65" />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <!--  内容区top banner  -->
                <Grid Grid.Row="0" Margin="20,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <ListBox
                        Name="nameTabLeftBanners"
                        Grid.Column="0"
                        ItemContainerStyle="{StaticResource TabLeftBannerStyle}"
                        ItemsSource="{Binding TabLeftBanners}"
                        ScrollViewer.VerticalScrollBarVisibility="Disabled"
                        Style="{StaticResource TabBannerStyle}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <i:InvokeCommandAction Command="{Binding TabLeftBannersCommand}" CommandParameter="{Binding ElementName=nameTabLeftBanners, Path=SelectedItem}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </ListBox>

                    <ListBox
                        Name="nameTabRightBanners"
                        Grid.Column="1"
                        ItemContainerStyle="{StaticResource TabRightBannerStyle}"
                        ItemsSource="{Binding TabRightBanners}"
                        ScrollViewer.VerticalScrollBarVisibility="Disabled"
                        SelectedIndex="{Binding SelectedRightBanner}"
                        Style="{StaticResource TabBannerStyle}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center"
                                    Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <i:InvokeCommandAction Command="{Binding TabRightBannersCommand}" CommandParameter="{Binding ElementName=nameTabRightBanners, Path=SelectedItem}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </ListBox>
                </Grid>

                <!--  内容区content  -->
                <ContentControl Grid.Row="1" prism:RegionManager.RegionName="UserSpaceContentRegion" />
            </Grid>

        </Grid>

        <!--  加载gif  -->
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Orientation="Vertical"
            Visibility="{Binding LoadingVisibility}">
            <ContentControl
                Width="40"
                Height="40"
                Content="{Binding Loading}" />
            <TextBlock
                Margin="0,10,0,0"
                FontSize="14"
                Foreground="{DynamicResource BrushTextDark}"
                Text="{DynamicResource UserSpaceWait}" />
        </StackPanel>

        <!--  没有数据提示  -->
        <Image
            Width="256"
            Height="256"
            Source="/DownKyi;component/Resources/no-data.png"
            Visibility="{Binding NoDataVisibility}" />

        <!--  顶部导航  -->
        <Grid VerticalAlignment="Top" Background="{Binding TopNavigationBg}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="150" />
            </Grid.ColumnDefinitions>

            <Button
                Grid.Column="0"
                Margin="10,5,0,5"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Command="{Binding BackSpaceCommand}"
                Style="{StaticResource ImageBtnStyle}">
                <StackPanel Orientation="Horizontal">
                    <ContentControl Width="24" Height="24">
                        <Path
                            Width="{Binding ArrowBack.Width}"
                            Height="{Binding ArrowBack.Height}"
                            Data="{Binding ArrowBack.Data}"
                            Fill="{Binding ArrowBack.Fill}"
                            Stretch="None" />
                    </ContentControl>
                    <TextBlock
                        VerticalAlignment="Center"
                        FontSize="16"
                        Foreground="{Binding ArrowBack.Fill}"
                        Text="{DynamicResource UserSpace}" />
                </StackPanel>
            </Button>

        </Grid>
    </Grid>
</UserControl>