Question

我试图在右侧创建一个隐藏日记屏幕的屏幕。我希望它在单击时展开，再次单击时隐藏。也希望它能够左右滑动，以便用户可以看到两个屏幕。还想调用该函数从View外部展开右侧屏幕。好的，这就是我到目前为止所做的：

在XAML方面

：

<Grid x:Name="grdWorkArea" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" Name="MainWindow"/>
                <ColumnDefinition Width="8" />
                <ColumnDefinition Width="0" Name="JournalWindow"/>
            </Grid.ColumnDefinitions>

            <ContentControl Name="ContentMain" Content="{Binding Path=CurrentViewModel}"/>
            <Rectangle Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="LightGray"/>
            <GridSplitter PreviewMouseDown="GridSplitter_PreviewMouseDown" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch">
                <GridSplitter.Style>
                    <Style TargetType="{x:Type GridSplitter}">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush Stretch="None" ImageSource="/Views;component/Images/ToggleWorkflow.png"/>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GridSplitter.Style>
            </GridSplitter>
            <ContentControl Grid.Column="2" Name="ContentJournal" Content="{Binding Path=CurrentViewModel}"/>
        </Grid>

在View后端代码：

bool journalExpanded;
journalExpanded = false;

private void GridSplitter_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    {
        if(journalExpanded)
        {
            MainWindow.Width = new GridLength(1, GridUnitType.Star); 
            JournalWindow.Width = new GridLength(0);
            journalExpanded = false;
        }
        else
        {
            MainWindow.Width = new GridLength(0);
            JournalWindow.Width = new GridLength(1, GridUnitType.Star);
            journalExpanded = true;
        }
    }

所以这很棒，我可以手动移动分割器或单击分割器，左屏幕可以扩展或隐藏。但我需要能够从此视图外部调用GridSplitter_PreviewMouseDown。基本上在屏幕的顶部，我有一个包含按钮btnJournal的TopBar。当我点击它时，我希望Journal扩展。所以我决定将此函数移动到MainWindowViewModel并将列宽度绑定到属性：

在XAML方面

：

<Grid x:Name="grdWorkArea" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding Path=MainWindowWidth}" Name="MainWindow"/>
                <ColumnDefinition Width="8" />
                <ColumnDefinition Width="{Binding Path=JournalWindowWidth}" Name="JournalWindow"/>
            </Grid.ColumnDefinitions>

            <ContentControl Grid.Column="0" Name="ContentMain" Content="{Binding Path=CurrentViewModel}"/>

            <Rectangle Grid.Column="1" VerticalAlignment="Stretch" Fill="LightGray"/>
            <GridSplitter PreviewMouseUp="clickJournalExpand"  Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch">
                <GridSplitter.Style>
                    <Style TargetType="{x:Type GridSplitter}">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush Stretch="None" ImageSource="/Views;component/Images/ToggleWorkflow.png"/>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GridSplitter.Style>
            </GridSplitter>

            <ContentControl Name="JournalMain" Content="{Binding Path=JournalVM}" Grid.Column="2" VerticalAlignment="Stretch"  />  
        </Grid>

在View后端代码：

private void clickJournalExpand(object sender, MouseButtonEventArgs e)
    {
        var vm = (MainWindowViewModel)this.DataContext;
        vm.clkJournalExpand.Execute(null);
    }

在MainWindowViewModel中：

private string _MainWindowWidth = "*";
private string _JournalWindowWidth = "0";

public ICommand clkJournalExpand
    {
        get
        {
            return clickJournalExpand ?? (clickJournalExpand = new RelayCommand(() => ObeyclickJournalExpand()));
        }
    }

private void ObeyclickJournalExpand()
    {
        if (JournalExpanded)
        {

            MainWindowWidth = "*";
            JournalWindowWidth = "0";
            //JournalExpanded = false;
        }
        else
        {
            MainWindowWidth = "0";
            JournalWindowWidth = "*";
            //journalExpanded = true;
        }
        JournalExpanded = !JournalExpanded;
    }

所以当我点击spliiter时这个工作正常。当我移动分离器时，它会停止工作，也不会对点击做出反应。事件触发但左屏幕不会扩展。当我重新启动程序时，它会再次工作，直到我移动拆分器。

我对Wpf和Xaml很新，可能完全错了。有人可以指点我在这里做错了吗？

Answer 1

我认为你的主要问题可能是绑定（我说可能，因为第一个解决方案对我来说并不完美，所以我猜到了你想要实现的目标。这也使我的解决方案与你的解决方案有所不同）。虽然您的绑定最初起作用，但移动网格滑块会覆盖宽度值，因此您将失去绑定。您可以尝试使用TextBlock和TextBox绑定到一个字符串内部的按钮，将TextBlock的值设置为特定的值。在此之后，绑定将丢失。

要实现这一点，您将拥有多种可能性。一种是创建一个适用于ViewModel的GridSplitter。

另一种方法可能是在第一个解决方案中设置Width并订阅该ViewModel的事件：

public partial class MainWindow : Window
{
    private double? _oldColumnJournalWindowWidth;

    // it is expanded when Width > 0
    public bool JournalExpanded
    {
        get { return ColumnJournalWindow.Width.Value > 0; }
    }

    public MainWindow()
    {
        InitializeComponent();
        var viewModel = new MainWindowViewModel();
        // Subscribe to event
        viewModel.JournalExpandedChanged += ViewModel_JournalExpandedChanged;
        DataContext = viewModel;
    }

    // When expanded set to either 100-0 or 50-50
    private void ViewModel_JournalExpandedChanged(object sender, EventArgs e)
    {
        ColumnMainWindow.Width = new GridLength(1, GridUnitType.Star);
        ColumnJournalWindow.Width = JournalExpanded ? new GridLength(0) : new GridLength(1, GridUnitType.Star);
    }

    // Handle expanding by click on splitter 
    private void GridSplitter_PreviewMouseUp(object sender, MouseButtonEventArgs e)
    {
        if (_oldColumnJournalWindowWidth == null)
            return;
        // if splitter was moved do not change expand
        if (Math.Abs((double)_oldColumnJournalWindowWidth - ColumnJournalWindow.Width.Value) > 1)
            return;
        _oldColumnJournalWindowWidth = null;
        ViewModel_JournalExpandedChanged(sender, e);
    }

    // Only on left button
    private void GridSplitter_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    {
        if (e.LeftButton != MouseButtonState.Pressed)
            return;
        _oldColumnJournalWindowWidth = ColumnJournalWindow.Width.Value;
    }
}

internal class MainWindowViewModel : INotifyPropertyChanged
{
    private ICommand _journalExpandCommand;

    public ICommand JournalExpandCommand
    {
        get
        {
            return _journalExpandCommand ?? (_journalExpandCommand = new RelayCommand(OnJournalExpandedChanged));
        }
    }

    // Event to trigger JournalExpanded should change
    public event EventHandler JournalExpandedChanged;

    protected virtual void OnJournalExpandedChanged()
    {
        if (JournalExpandedChanged != null)
            JournalExpandedChanged(this, EventArgs.Empty);
    }


    // ...
}

相应的XAML：

<Grid x:Name="grdWorkArea" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" Name="ColumnMainWindow"/>
        <ColumnDefinition Width="8" />
        <ColumnDefinition Width="*" Name="ColumnJournalWindow"/>
    </Grid.ColumnDefinitions>

    <Rectangle Grid.Column="0" Name="ContentMain"  Fill="#FFBD4444" Grid.Row="1"/>

    <Rectangle Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" Fill="LightGray" />
    <GridSplitter PreviewMouseUp="GridSplitter_PreviewMouseUp" PreviewMouseDown="GridSplitter_PreviewMouseDown"  Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch">
        <GridSplitter.Style>
            <Style TargetType="{x:Type GridSplitter}">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush Stretch="None" ImageSource="image.png"/>
                    </Setter.Value>
                </Setter>
            </Style>
        </GridSplitter.Style>
    </GridSplitter>

    <Rectangle Name="JournalMain"  Grid.Column="2" VerticalAlignment="Stretch" Fill="#FF5E912A" Grid.Row="1"  />
    <Button Grid.Row="0" Grid.ColumnSpan="3" x:Name="button" Content="Expand" Command="{Binding JournalExpandCommand}"  Height="20"/>
</Grid>

您也可以订阅PropertyChanged，或者您可以实现一个接口（ViewModel已知）并直接更改expand方法。

希望我的意图是正确的，这对你有帮助。

Answer 2

此类行为的最可能原因是GridSplitter的工作方式。如果我没有弄错，移动拆分器后，它会为相应的列设置Width值（或者为行设置Height）。关键部分是它使用DependencyObject的{{3}}方法，而不是SetValue。前者的问题在于它的行为会有所不同，具体取决于相应属性上绑定集的模式 - 如果该模式支持目标到源方向（TwoWay和OneWayToSource模式），它会更新来源，否则（OneWay和OneTime模式）它会覆盖属性值源并将其设置为本地，有效地“破坏”绑定。

现在，由于您未明确指定绑定模式，因此使用默认值（OneWay属性为ColumnDefinition.Width。因此，一旦移动分离器，它就会“中断”。

为了让它按预期工作，将绑定模式明确设置为TwoWay就足够了：

<ColumnDefinition Width="{Binding Path=MainWindowWidth, Mode=TwoWay}"
                  Name="MainWindow"/>
<ColumnDefinition Width="8" />
<ColumnDefinition Width="{Binding Path=JournalWindowWidth, Mode=TwoWay}"
                  Name="JournalWindow"/>

使用GridSplitter作为扩展器，我这样做了吗？

2 个答案: