Question

我的项目适用于WP8.1，我使用的是Silverlight。在这个项目中，我有两个矩形，一个蓝色和一个红色矩形。我希望每个人占据屏幕宽度的50％，所以我做了这个：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Rectangle Grid.Column="0" Fill="Blue" Visibility="{Binding BlueRectVisibility}" />
    <Rectangle Grid.Column="1" Fill="Red" Visibility="{Binding RedRectVisibility}"/>
</Grid>

有时，其中一个矩形可以通过绑定将其可见性设置为折叠。我想要的是另一个占据所有宽度。使用Xaml，可见矩形只占用屏幕的一半。

将ColumnDefinitions更改为Auto不起作用，因为Grid不再占用屏幕宽度的100％。

你能解释一下如何制作一个动态的＆＃34; UI这样做？

Answer 1

Auto不起作用的原因是因为布局如下：

Page：嘿Grid，你想成为多大？
Grid：Dunno，lemme问ColumnDefinition。你想成为多大？
ColumnDefinition：哎呀，我不确定;我需要问Rectangle。嘿Rectangle，你需要多少空间？
Rectange：呃，我真的不在乎。
ColumnDefinition：那就是零！
依旧备份链

所以你最终得到一个零宽度的列。解决方案是动态绑定宽度。 @Tam Bui有正确的方法，但这是Windows Phone 8.1的简化版本：

<强> XAML

<StackPanel>
  <Grid Height="100">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="{Binding FirstColumnWidth}" />
      <ColumnDefinition Width="{Binding SecondColumnWidth}"/>
    </Grid.ColumnDefinitions>
    <Rectangle VerticalAlignment="Stretch" 
      HorizontalAlignment="Stretch" Fill="Blue" />
    <Rectangle VerticalAlignment="Stretch" 
      HorizontalAlignment="Stretch" Fill="Red" Grid.Column="1"/>
  </Grid>
  <Button Content="toggle column width" Click="ToggleColWidth"/>
</StackPanel>

<强>代码

public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
{
  GridLength firstWidth;
  GridLength secondWidth;

  public MainPage()
  {
    firstWidth = secondWidth = new GridLength(1, GridUnitType.Star);
    DataContext = this;
    InitializeComponent();
  }

  void RaisePropertyChanged([CallerMemberName] string name = "")
  {
    var handler = PropertyChanged;
    if (handler != null)
      handler(this, new PropertyChangedEventArgs(name));
  }
  public event PropertyChangedEventHandler PropertyChanged;

  public GridLength FirstColumnWidth
  {
    get { return firstWidth; }
    set { firstWidth = value; RaisePropertyChanged(); }
  }

  public GridLength SecondColumnWidth
  {
    get { return secondWidth; }
    set { secondWidth = value; RaisePropertyChanged(); }
  }

  private void ToggleColWidth(object sender, RoutedEventArgs e)
  {
    if (FirstColumnWidth.GridUnitType == GridUnitType.Star)
    {
      FirstColumnWidth = new GridLength(0, GridUnitType.Pixel);
      SecondColumnWidth = new GridLength(1, GridUnitType.Star);
    }
    else
    {
      FirstColumnWidth = SecondColumnWidth = new GridLength(1, GridUnitType.Star);
    }
  }
}

使用这种方法，您甚至不需要更改矩形的Visibility。

Answer 2

我认为问题的根源在于你将Grid的列定义为50％，所以一旦确定，那么改变Rectangle的可见性将没有任何区别。我使用WPF制作了这个小POC（不确定是否所有命令都转换为Silverlight，但你可以试试）。基本上我专注于弄乱Column的宽度而不是Rectangle可见性。

在你的xaml文件中：

<Window x:Class="CollapsibleRegion.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:CollapsibleRegion"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.InputBindings>
    <KeyBinding Modifiers="Ctrl" Key="B" Command="{Binding ToggleWidthCommand}" CommandParameter="Blue"/>
    <KeyBinding Modifiers="Ctrl" Key="R" Command="{Binding ToggleWidthCommand}" CommandParameter="Red"/>
</Window.InputBindings>
<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="blueColumn" Width="{Binding BlueColumnWidth}" />
            <ColumnDefinition x:Name="redColumn" Width="{Binding RedColumnWidth}" />
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" Fill="Blue" />
        <Rectangle Grid.Column="1" Fill="Red" />
    </Grid>
</Grid>
</Window>

在您的代码隐藏（xaml.cs）中：

public partial class MainWindow : Window, INotifyPropertyChanged
{
    private GridLength blueColumnWidth;

    private GridLength redColumnWidth;

    private ToggleWidthCommand toggleWidthCommand;

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
        this.BlueColumnWidth = new GridLength(5, GridUnitType.Star);
        this.RedColumnWidth = new GridLength(5, GridUnitType.Star);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public GridLength BlueColumnWidth
    {
        get
        {
            return this.blueColumnWidth;
        }
        set
        {
            this.blueColumnWidth = value; OnPropertyChanged();
        }
    }

    public GridLength RedColumnWidth
    {
        get
        {
            return this.redColumnWidth;
        }
        set
        {
            this.redColumnWidth = value; OnPropertyChanged();
        }
    }

    public ToggleWidthCommand ToggleWidthCommand
    {
        get
        {
            if (this.toggleWidthCommand == null)
            {
                this.toggleWidthCommand = new ToggleWidthCommand(this);
            }

            return this.toggleWidthCommand;
        }
    }

    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

最后，对于ToggleWidthCommand.cs，添加：

public class ToggleWidthCommand : ICommand
{
    private MainWindow parent;

    public ToggleWidthCommand(MainWindow parent)
    {
        this.parent = parent;
    }

    public event EventHandler CanExecuteChanged;

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        var blueOrRed = (string)parameter;

        if (blueOrRed == "Blue")
        {
            if (this.parent.BlueColumnWidth.Value == 0)
                this.parent.BlueColumnWidth = new System.Windows.GridLength(5, System.Windows.GridUnitType.Star);
            else
                this.parent.BlueColumnWidth = new System.Windows.GridLength(0, System.Windows.GridUnitType.Pixel);
        }
        if (blueOrRed == "Red")
        {
            if (this.parent.RedColumnWidth.Value == 0)
                this.parent.RedColumnWidth = new System.Windows.GridLength(5, System.Windows.GridUnitType.Star);
            else
                this.parent.RedColumnWidth = new System.Windows.GridLength(0, System.Windows.GridUnitType.Pixel);
        }
    }
}

这只是一个概念验证，所以显然有更高效/更清晰/可扩展的方式来实现这种行为，但我只是想快速响应，以向您展示如何完成。希望它适合你！

如何在Xaml中使用折叠控件调整UI？

2 个答案: