我试图在右侧创建一个隐藏日记屏幕的屏幕。我希望它在单击时展开，再次单击时隐藏。也希望它能够左右滑动，以便用户可以看到两个屏幕。还想调用该函数从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并将列宽度绑定到属性：
：
<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很新，可能完全错了。有人可以指点我在这里做错了吗？
答案 0 :(得分：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方法。
希望我的意图是正确的，这对你有帮助。
答案 1 :(得分：1)
此类行为的最可能原因是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"/>