膨胀机控制- UWP

Question

我的UWP应用程序中有一个扩展程序控件，代码如下：

<Expander
     Header="A"
     IsExpanded =" True">
     <TextBlock
       Text="Content in A"/>
</Expander>
<Expander
     Header="B">
     <TextBlock
       Text="Content in B"/>
</Expander>

目前，扩展程序A在默认情况下是展开的，B是关闭的。但是，当我展开B时，A也是开的。我想要的行为是，如果我扩大一个，另一个关闭，反之亦然。对于如何以MVVM的方式实现这一点，有什么建议吗？我需要在这里使用转换器吗？我研究了Collapse all the expanders and expand one of them by default，但大多数解决方案碰巧都是在修改后面的代码。如果我在Main.xaml中有一个XAML代码，并且我有一个相应的MainPageViewModel.cs，那么如何实现相同的目标呢？

Answer 1

我想要的行为是，如果我展开一个，另一个关闭，反之亦然。

对于此场景，您可以使用OppositConverter使另一个支出器在前面打开时关闭。

public class OppositConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
  
        return !(bool)value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return !(bool)value;
    }
}
public class MainPageViewModel : INotifyPropertyChanged
{
    public MainPageViewModel()
    {

    }
    private bool _isExpend;

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] string name = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
    public bool IsExpend
    {
        get
        {
            return _isExpend;
        }
        set
        {
            _isExpend = value;
            OnPropertyChanged();
        }
    }
}

使用

<Page.DataContext>
    <local:MainPageViewModel x:Name="ViewModel" />
</Page.DataContext>
<Page.Resources>
    <local:OppositConverter x:Key="OppositConverter" />
</Page.Resources>
<StackPanel>
    <controls:Expander
        x:Name="Expander1"
        Margin="0,0,0,10"
        VerticalAlignment="Top"
        HorizontalContentAlignment="Stretch"
        ExpandDirection="Down"
        Header="This is the header - expander 1"
        IsExpanded="{Binding IsExpend, Mode=TwoWay}">
        <Grid>
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="This is the expanded content"
                TextWrapping="Wrap" />
        </Grid>
    </controls:Expander>
    <controls:Expander
        x:Name="Expander2"
        Margin="0,0,0,10"
        VerticalAlignment="Top"
        HorizontalContentAlignment="Stretch"
        ExpandDirection="Down"
        Header="This is the header - expander 2"
        IsExpanded="{Binding IsExpend, Converter={StaticResource OppositConverter}, Mode=TwoWay}">
        <Grid>
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="This is the expanded content"
                TextWrapping="Wrap" />
        </Grid>
    </controls:Expander>     
</StackPanel>