Question

我需要一些建议。您知道如何在WPF中执行与图片类似的操作。这在UWP中称为“害羞标头”。 Shy header on GitHub。感谢您的建议。

Answer 1

这里有一些代码可以帮助您入门。它并不完美，但我认为它包含了所需的主要内容（您可能会发现here）。当然，当前的状态还远没有达到完美的水平，并且具有中等的体系结构，但是无论如何……这是代码：

XAML：

<Window x:Class="scrollviewerShyHeader.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:scrollviewerShyHeader"
    mc:Ignorable="d"
    Title="MainWindow" Height="400" Width="800"
    >
<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition MaxHeight="{Binding GridTopRowHeight}"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ScrollViewer x:Name="MyShyScrollViewer" ScrollChanged="ScrollChanged"
                  Grid.Row="1">
      <StackPanel>
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        <Label Content="2323 343 34324 234 234" />
        </StackPanel>
    </ScrollViewer>
    <Label Content="Header Header Header Header Header Header Header"
           Background="LightCoral" Height="{Binding Path=ShyHeight}"
           VerticalAlignment="Top" Opacity="{Binding Path=ShyOpacity}" 
           Grid.Row="{Binding HeaderGridRow}"
           />
  </Grid>
</Window>

代码背后：

using System.Windows;
using System.Windows.Controls;


namespace scrollviewerShyHeader
{
    public partial class MainWindow : Window
    {
        private void ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            var vm = (ViewModel)this.DataContext;
            vm.ScrollViewerOffset = e.VerticalOffset;
        }
    }
}

和视图模型：

using System.Diagnostics;

namespace scrollviewerShyHeader
{
    class ViewModel : ViewModelBase
    {

        public ViewModel()
        {
            ShyHeight = 100;
            ShyOpacity = 1.0;
            HeaderGridRow = 0;
            GridTopRowHeight = 100;
        }


        private int shyHeight;
        public int ShyHeight
        {
            get { return shyHeight; }
            set
            {
                shyHeight = value;
                RaisePropertyChanged();
            }
        }

        private double shyOpacity;
        public double ShyOpacity
        {
            get { return shyOpacity; }
            set
            {
                shyOpacity = value;
                RaisePropertyChanged();
            }
        }


        private double scrollerViewerOffset;
        public double ScrollViewerOffset
        {
            get { return scrollerViewerOffset; }
            set
            {
                Debug.Print(value.ToString());
                scrollerViewerOffset = value;
                if (scrollerViewerOffset > 0)
                {
                    ShyOpacity = 0.7;
                    ShyHeight = 80;
                    HeaderGridRow = 1;
                    GridTopRowHeight = 0;
                } else if (scrollerViewerOffset == 0)
                {
                    ShyOpacity = 1;
                    ShyHeight = 100;
                    HeaderGridRow = 0;
                    GridTopRowHeight = 100;
                }
            }
        }

        private int headerGridRow;
        public int HeaderGridRow
        {
            get { return headerGridRow; }
            set
            {
                headerGridRow = value;
                RaisePropertyChanged();
            }
        }

        private int gridTopRowHeight;

        public int GridTopRowHeight
        {
            get { return gridTopRowHeight; }
            set { gridTopRowHeight = value; RaisePropertyChanged();}
        }

    }
}

viewbasemodel：

using System.ComponentModel;
using System.Runtime.CompilerServices;


namespace scrollviewerShyHeader
{
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

WPF-害羞的标头

1 个答案: