C# UWP 轮播焦点动画

Question

首先抱歉我的英语不好。我有一个效果很好的轮播视图。

` <my:Carousel x:FieldModifier="public" x:Name="Carousel" IsDoubleTapEnabled="False"  ItemsSource="{Binding Source={StaticResource ces}}" Margin="21,730,33,37" ItemMargin="20" ItemDepth="200" ItemRotationX="0" ItemRotationY="0" ItemRotationZ="0" InvertPositive="False" PointerPressed="Carousel_PointerPressed" SelectionChanged="Carousel_SelectionChanged" ManipulationStarted="Carousel_ManipulationStarted" >
            <my:Carousel.ItemTemplate>
                <DataTemplate x:DataType="data:Bilder">
                    <StackPanel Orientation="Vertical">
                        <Image Width="250" Height="170" Source="{Binding Bild}"/>
                    </StackPanel>
                </DataTemplate>
            </my:Carousel.ItemTemplate>
         </my:Carousel>`

我想在项目获得和失去焦点时删除边框（见下图）。我该如何管理？我知道有故事板的东西，但我不知道如何使用它。

请帮帮我

Answer 1

你可以把Model（这里应该是你的Bilder class）的属性绑定到border的背景上，之后，当你select一个item，Model对应的属性会随着属性的变化而变化，Border也会随着属性的变化而变化。 Model/Bilder class 应该实现 INotifyPropertyChanged 接口。下面是一个简单的例子。

首先，在你的Bilderclass中添加一个borderBrush属性并实现INotifyPropertyChanged接口。

public class Bilder : INotifyPropertyChanged
{
    public string Bild { get; set; }
    private SolidColorBrush borderBrush;
    public SolidColorBrush BorderColor
    {
        get { return borderBrush; }
        set
        {
            borderBrush = value;
            OnPropertyChanged(nameof(BorderColor));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

其次，修改Carousel.ItemTemplate添加边框，

<my:Carousel.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical" BorderBrush="{Binding BorderColor}"
                    BorderThickness="2">
                <Image Width="250" Height="170" Source="{Binding Bild}"/>
        </StackPanel>
    </DataTemplate>
</my:Carousel.ItemTemplate>

然后你可以操作Carousel_SelectionChanged来改变对应项目的属性，使项目有边框。当您初始化 Bilder 对象时，您可能需要将默认的 BorderColor 属性设置为 Colors.Transparent。

这是带有 Carousel_SelectionChanged 事件处理程序的 Page.xaml.cs 代码，

public MainPage()
{
    this.InitializeComponent();

    this.Loaded += MainPage_Loaded;
    OperateItems = new List<Bilder>();
}

List<Bilder> OperateItems;

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    //these two lines code could be deleted if you don't set the default selected item
    Carousel.SelectedIndex = 0;
    ((Bilder)Carousel.SelectedItem).BorderColor = new SolidColorBrush(Colors.Gray);
}

private void Carousel_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    OperateItems.Clear();
    foreach (Bilder item in e.AddedItems)
    {
        OperateItems.Add(item);
    }
    foreach (Bilder item in e.RemovedItems)
    {
        OperateItems.Add(item);
    }

    foreach (Bilder item in Carousel.Items)
    {
        if (OperateItems.Contains(item))
        {
            item.BorderColor = new SolidColorBrush(Colors.Gray);
        }
        else
        {
            item.BorderColor = new SolidColorBrush(Colors.Transparent);
        }
    }
}

Answer 2

至少我解决了我的问题。我的图片太大了。边框来自缩小图片。我找到了一个代码，你不会通过调整尺寸

来降低任何质量

public static BitmapImage ResizedImage(BitmapImage sourceImage, int maxWidth, int maxHeight)
    {
        var origHeight = sourceImage.PixelHeight;
        var origWidth = sourceImage.PixelWidth;
        var ratioX = maxWidth / (float)origWidth;
        var ratioY = maxHeight / (float)origHeight;
        var ratio = Math.Min(ratioX, ratioY);
        var newHeight = (int)(origHeight * ratio);
        var newWidth = (int)(origWidth * ratio);

        sourceImage.DecodePixelWidth = newWidth;
        sourceImage.DecodePixelHeight = newHeight;

        return sourceImage;
    }

C# UWP 轮播焦点动画

C# UWP Carousel Focus Animation

c#

animation

focus

carousel

uwp