C# UWP Carousel Focus Animation

Question

As first sorry for my bad english. I have a Carousel View that works really well.

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

I want to remove the border if a item getting and loosing focus (see picture below). How can I manage this? I know there is something with a Storyboard, but i dont know how to use it.

Please help me.

Answer 1

You can bind the Model (here should be your Bilder class)'s property to the border's background, after that, when you select an item, the Model's corresponding property will change and the Border will also change with the property's changing. The Model / Bilder class should implement the INotifyPropertyChanged interface. The following is a simple example.

Firstly, add a borderBrush property in your Bilder class and implement the INotifyPropertyChanged interface.

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

Secondly, modify the Carousel.ItemTemplate to add a border,

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

Then you can operate the Carousel_SelectionChanged to change the corresponding item's property to make the items with border. When you initialize the Bilder object, you maybe need to set the default BorderColor property to Colors.Transparent .

Here is the Page.xaml.cs code with Carousel_SelectionChanged event handler,

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

Atleast i slove my Problem. My Pictures was to big. The border came from Size down the Picture. I found a Code with that u does not loose any Quality by sizing

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