silverlight 多个Expander 联动，只能有一个Expander是打开的

[duoshanx]

我想做成横排的4个Expander，类似于TabControl的效果，就是以能有一个打开。

参照下面的URL，做了一下，但是没有实现。
1，它是竖着放的。
2，能同时打开多个。
http://stackoverflow.com/questions/4449000/wpf-multiple-expander-have-to-collapse-if-one-is-expanded

下面是我的代码。

<UserControl
	x:Class="SLApp.MultipleExpander"
	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:sysData="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
	mc:Ignorable="d"
     xmlns:local="clr-namespace:SLApp"
	d:DesignWidth="640" d:DesignHeight="480" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    Loaded="UserControl_Loaded"
    >

    <Grid x:Name="LayoutRoot">

        <StackPanel Name="StackPanel1">
            <StackPanel.Resources>
                <local:ExpanderToBooleanConverter x:Key="ExpanderToBooleanConverter" />
            </StackPanel.Resources>
            <toolkit:Expander Header="Expander 1"
                      IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=1}">
                <TextBlock>Expander 1</TextBlock>
            </toolkit:Expander>
            <toolkit:Expander Header="Expander 2"
                      IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=2}">
                <TextBlock>Expander 2</TextBlock>
            </toolkit:Expander>
            <toolkit:Expander Header="Expander 3"
                      IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=3}">
                <TextBlock>Expander 3</TextBlock>
            </toolkit:Expander>
            <toolkit:Expander Header="Expander 4"
                      IsExpanded="{Binding SelectedExpander, Mode=TwoWay, Converter={StaticResource ExpanderToBooleanConverter}, ConverterParameter=4}">
                <TextBlock>Expander 4</TextBlock>
            </toolkit:Expander>
        </StackPanel>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
using System.Windows.Media.Imaging;
using System.Windows.Data;
using System.Globalization;

namespace SLApp
{
	public partial class MultipleExpander : UserControl
	{
		public MultipleExpander()
		{
			InitializeComponent();
           
		}

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            StackPanel1.DataContext = new ExpanderListViewModel();
        }
	}
    public class ExpanderToBooleanConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (value == parameter);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (System.Convert.ToBoolean(value)) return parameter;
            return null;
        }
    }

    public class ExpanderListViewModel
    {
        public Object SelectedExpander { get; set; }
    }
}

[MicrosoftCenterOfHN]

设计页面MainWindow.xaml

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Test.Converters"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:ExpanderToBoolConverter x:Key="ExpanderToBoolConverter"></local:ExpanderToBoolConverter>
    </Window.Resources>
    <Grid>
        <StackPanel x:Name="myStackPanel" Orientation="Horizontal">
            <Expander Header="Expander 1" 
                      IsExpanded="{Binding Path=SelectedExpander,Mode=TwoWay, Converter={StaticResource ResourceKey=ExpanderToBoolConverter}, ConverterParameter=1}">
                <TextBlock>Expander 1</TextBlock>
            </Expander>
            <Expander Header="Expander 2" 
                      IsExpanded="{Binding Path=SelectedExpander,Mode=TwoWay,Converter={StaticResource ResourceKey=ExpanderToBoolConverter}, ConverterParameter=2}">
                <TextBlock>Expander 2</TextBlock>
            </Expander>
            <Expander Header="Expander 3" 
                      IsExpanded="{Binding Path=SelectedExpander,Mode=TwoWay,Converter={StaticResource ResourceKey=ExpanderToBoolConverter}, ConverterParameter=3}">
                <TextBlock>Expander 3</TextBlock>
            </Expander>
            <Expander Header="Expander 4" 
                      IsExpanded="{Binding Path=SelectedExpander,Mode=TwoWay,Converter={StaticResource ResourceKey=ExpanderToBoolConverter}, ConverterParameter=4}">
                <TextBlock>Expander 4</TextBlock>
            </Expander>
        </StackPanel>
    </Grid>
</Window>

codebehind file: MainWindow.xaml.cs

public MainWindow()
        {
            InitializeComponent();
            this.myStackPanel.DataContext = new ExpanderListViewModel();
        }

[MicrosoftCenterOfHN]

Converter类：

public class ExpanderToBoolConverter: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (value == parameter);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (System.Convert.ToBoolean(value)) return parameter;
            return null;
        }

    }

ViewModel类：

public class ExpanderListViewModel
    {
        public object SelectedExpander
        {
            set;
            get;
        }
    }

可以正常运行。

[duoshanx]

谢谢，在普通应用程序里，确实能实现。
但是相同的代码，在 silverlight 里却实现不了。。。。有什么差别吗？

[MicrosoftCenterOfHN]

哦，我看你发的链接是wpf, 所以用了wpf.

回头我再用silverlight看看，现在没环境。

[assky124]

ControlToolkit 里不是有 Accordion控件么

[sundayX]

silverlight中对象属性变化时不会自动通知UI对象，需要实现INotifyPropertyChanged接口，如下。

 public class ExpanderListViewModel : INotifyPropertyChanged
    {
        private object selectedExpander = 1;
        public object SelectedExpander
        {
            get { return this.selectedExpander; }
            set
            {
                if (this.selectedExpander != value)
                {
                    this.selectedExpander = value;
                    if (PropertyChanged != null)
                        PropertyChanged.Invoke(this, new PropertyChangedEventArgs("SelectedExpander"));
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }

[MicrosoftCenterOfHN]

[Quote=引用 8 楼 的回复:]
引用 7 楼 的回复:
这个对于wpf也不会通知的，也要继承INotifyPropertyChanged接口。但这个例子中，对于wpf，这个类不继承这个接口确实也能实现楼主的要求，感觉很奇怪。

这个还真第一次遇到呢，具体原因我也不清楚。
感觉在执行IValueConverter的ConvertBack时，wpf能够自动的去通知界面更新而不依靠自定义属性的通知，但silverlight不行……
[/Quote]

我和你的想法一样，我也觉得问题出现在Converter上，再研究下。

[sundayX]

[Quote=引用 7 楼 的回复:]
这个对于wpf也不会通知的，也要继承INotifyPropertyChanged接口。但这个例子中，对于wpf，这个类不继承这个接口确实也能实现楼主的要求，感觉很奇怪。
[/Quote]
这个还真第一次遇到呢，具体原因我也不清楚。
感觉在执行IValueConverter的ConvertBack时，wpf能够自动的去通知界面更新而不依靠自定义属性的通知，但silverlight不行，silverlight需要依靠自定义属性的通知。

[MicrosoftCenterOfHN]

[Quote=引用 6 楼 的回复:]

silverlight中对象属性变化时不会自动通知UI对象，需要实现INotifyPropertyChanged接口，如下。
C# code

public class ExpanderListViewModel : INotifyPropertyChanged
{
private object selectedExpander = 1;
publi……
[/Quote]

用6楼的方法就可以实现楼主的要求。
但有个问题问一下sundayX，
silverlight中对象属性变化时不会自动通知UI对象，需要实现INotifyPropertyChanged接口，

这个对于wpf也不会通知的，也要继承INotifyPropertyChanged接口。但这个例子中，对于wpf，这个类不继承这个接口确实也能实现楼主的要求，感觉很奇怪。
能解释一下吗？或者有人知道的说一下，一下子有点不明白了。

[forever772]

Header放入Radiobutton，Expander的IsExpanded绑定Radiobutton的IsChecked属性。