时间戳

首页 > 解决方案 > 扩展器控制 - UWP

xaml - 扩展器控制 - UWP

问题描述

我的 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 方式实现这一目标的任何建议？我需要在这里使用转换器吗？我查看了折叠所有扩展器并默认展开其中一个，但大多数解决方案恰好是修改后面的代码。如果我在 Main.xaml 中有一个 XAML 代码并且我有一个相应的 MainPageViewModel.cs，我如何实现相同的目标？

标签： xamluwpuwp-xaml

解决方案

I would like the behavior that if I expand one , the other closes and vice versa.

For this scenario, you could use OppositConverter to make the other expender close when previous is open.

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();
        }
    }
}

Usage

<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>

推荐阅读