@Jordy van Eijk 为您提供了一个可行的解决方案,但由于您要求提供示例,我将为您提供我自己的实现。请注意,您可以通过多种变体和其他方式执行此操作,并且由于您的问题似乎很广泛,我只会填写初始设计。
我的方法使用 MVVM 设计模式:
内容展示器将绑定到视图模型并显示当前数据模板。数据模板将视图模型与用户控件相关联。用户控件包含您的视图、调整所选项目大小的绑定以及显示/隐藏扩展显示的触发器。
内容展示器 (MainWindow.xaml):
<ContentPresenter Content="{Binding CurrentView}"/>
数据模板 (MainWindow.xaml):
<Window.Resources>
<DataTemplate DataType="{x:Type viewModel:UserControl1ViewModel}" >
<view:UserControl1/>
</DataTemplate>
</Window.Resources>
用户控件(UserControl1.xaml):
<UserControl.Resources>
<Style x:Key="ExtendedControl" TargetType="Button">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsVisible}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid HorizontalAlignment="Left" Background="Blue" Width="525">
<Button Content="Resize Control" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding Width}" Height="265" Command="{Binding ResizeCommand}" Margin="10,30,0,0"/>
<Button Content="Extended Control" Style="{StaticResource ExtendedControl}" Margin="383,32,25,258"/>
</Grid>
用户控件 1 视图模型 (UserControl1ViewModel.cs):
public class UserControl1ViewModel : ViewModelBase
{
public ICommand ResizeCommand
{
get
{
if (_resizeCommand == null) _resizeCommand = new RelayCommand(ResizeButton, () => true);
return _resizeCommand;
}
}
public bool IsVisible
{
get { return _isVisible; }
set
{
_isVisible = value;
RaisePropertyChanged("IsVisible");
}
}
public double Width
{
get { return _width; }
set
{
_width = value;
RaisePropertyChanged("Width");
}
}
private RelayCommand _resizeCommand;
private bool _isVisible;
private double _width;
public UserControl1ViewModel()
{
Width = 100.0;
IsVisible = false;
}
private void ResizeButton()
{
Width = Application.Current.MainWindow.ActualWidth * .65;
IsVisible = true;
}
}
点击前:
点击后:
这概述了创建您指定的基础应用程序所需的主要部分。当按下 resize 控件时,其宽度绑定更改为将其大小扩展为应用程序主窗口的 65%,并且扩展控件按钮的可见性绑定更改为 true。 Id 包括调整大小的图片,但我的声誉还不允许。我希望您像其他人所建议的那样将 MVVM 视为一种未来的架构模式,如果您在我的简单概述之外还有任何其他问题,请随时与我联系。祝你好运!
编辑:基本视图模型、命令和绑定属性的类来自 MVVM Light 库。您可以使用以下方法从 Visual Studio 将其导入您的项目:工具 -> NuGet 包管理器 -> 管理解决方案的 NuGet 包 -> 搜索“MVVM Light”
编辑 2
有关您的评论的示例。我们有一个父网格,其中包含一个始终为最大窗口大小的 70% 的编辑器视图和一个用于扩展控制面板大小的绑定:
查看:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="{Binding Width}"/>
</Grid.ColumnDefinitions>
<ContentPresenter Content="{Binding ViewManager.EditorControlView}" Grid.Column="0"/>
<ContentPresenter Content="{Binding ViewManager.ExtendedControlView}" Grid.Column="1"/>
</Grid>
绑定:
public string Width
{
get { return _width; }
set
{
_width = value;
RaisePropertyChanged("Width")
}
}
//set our extended control to the other 30 percent of the window size
Width = "3*";
要根据 MVVM 标准正确更改此宽度,我们需要在我们的视图模型之间使用某种形式的通信,幸运的是,这是您可以从这里学到的另一课。仅仅因为 iv 在整个示例中都使用了 MVVM Light,id 建议在 google 中搜索“MVVM Light Messenger”,因为它提供了一种可靠的通信方式。使用它,您可以提高更改宽度以从应用程序的任何位置隐藏父视图中的其他窗口组件。 :D