如何在silverlight中更改收藏图像?

时间:2013-08-06 07:05:11

标签: silverlight windows-phone-7 windows-8

我的设计代码如下:

<Grid HorizontalAlignment="Left" Height="42" VerticalAlignment="Top" Width="302" Margin="12,471,0,0" Background="{StaticResource AppBarItemForegroundThemeBrush}">
                <TextBlock HorizontalAlignment="Left" Margin="6,6,0,0" TextWrapping="Wrap" Text="Change Color" VerticalAlignment="Top" Height="26" Width="137" FontSize="18" Foreground="Black" />
                <Image HorizontalAlignment="Left" Height="33" Margin="163,3,0,0" VerticalAlignment="Top" Width="41" Source="Assets/c1-1.png" x:Name="c1" Tapped="c1_Tapped" />
                <Image HorizontalAlignment="Left" Height="32" Margin="212,4,0,0" VerticalAlignment="Top" Width="45" Source="Assets/c3-1.png" x:Name="c2" Tapped="c2_Tapped" RenderTransformOrigin="0.825,0.5" />
                <Image HorizontalAlignment="Left" Height="33" Margin="262,3,0,0" VerticalAlignment="Top" Width="40" Source="Assets/c2-1.png" x:Name="c3" Tapped="c3_Tapped" />

            </Grid>

代码背后的代码:

private void c1_Tapped(object sender, TappedRoutedEventArgs e)
        {
            Images = new ObservableCollection<string>();
            Images.Add(@"Assets/02_perspective_img_1.png");
            Images.Add(@"Assets/02_perspective_img_2.png");
            Images.Add(@"Assets/02_perspective_img_3.png");

            this.DataContext = this;
        }

        private void c2_Tapped(object sender, TappedRoutedEventArgs e)
        {
            Images = new ObservableCollection<string>();
            Images.Add(@"Assets/03_perspective_img_1.png");
            Images.Add(@"Assets/03_perspective_img_2.png");
            Images.Add(@"Assets/03_perspective_img_3.png");

            this.DataContext = this;
        }

        private void c3_Tapped(object sender, TappedRoutedEventArgs e)
        {
            Images = new ObservableCollection<string>();
            Images.Add(@"Assets/01_perspective_img_1.png");
            Images.Add(@"Assets/01_perspective_img_2.png");
            Images.Add(@"Assets/01_perspective_img_3.png");

            this.DataContext = this;
        }

当点击特定图像时需要显示特定图像。但没有显示出来。 仅显示首次点击的项目图片。请让我知道如何更改集合。 我将该集合绑定到Windows 8中的flipview控件。

        <FlipView.ItemTemplate>
            <DataTemplate>
                <Image HorizontalAlignment="Left"   Source="{Binding}" Height="450" VerticalAlignment="Top" Width="792" x:Name="imagecontrol" Stretch="Fill"/>

            </DataTemplate>
        </FlipView.ItemTemplate>



    </FlipView>

2 个答案:

答案 0 :(得分:0)

我正在做一些假设。一个是FlipView控件将ItemsSource绑定到Images属性。如果要将DataContext设置为自己(相关页面),则需要执行以下几种选项之一。

一:不要将图像设置为新的集合。您正在使用ObservableCollection以利用它。清除集合并将项目添加回其中。

private void c3_Tapped(object sender, TappedRoutedEventArgs e)
{
    Images.Clear();
    Images.Add(@"Assets/01_perspective_img_1.png");
    Images.Add(@"Assets/01_perspective_img_2.png");
    Images.Add(@"Assets/01_perspective_img_3.png");
}

二:在页面中实现INotifyPropertyChanged并在重置Images属性时触发PropertyChanged事件

private ICollection<string> _images;
public ICollection<string> Images 
{
    get { return _images; }
    set 
    {
        _images = value;
        OnPropertyChanged("Images");
    }
}

您可能会发现需要越来越多的绑定。因此,通常最好有一个单独的ViewModel类来保存您的数据。

答案 1 :(得分:0)

建议使用Shawn的方式是我会推荐的,但是当我在 Windows 8应用页的情况下进行测试时, LayoutAwarePage 继承,那么在这种情况下 - 首先你得到错误页面无法实现 InotifypropertyChanged 其次当我用 ObsevableCollection 测试它时,它也无法正常工作。所以我已经采用这种解决方法来解决您的问题。在这种情况下,每次更新Image集合时,您只需更新 FlipView 控件的 itemsSource 属性。

private void c1_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Images = new ObservableCollection<string>();
        Images.Add(@"Assets/02_perspective_img_1.png");
        Images.Add(@"Assets/02_perspective_img_2.png");
        Images.Add(@"Assets/02_perspective_img_3.png");

       FlipviewControlName.ItemsSource = Images;
    }

我知道这不是正确的解决方案,但我想我会解决你的问题...