UWP - PivotItem mouse over change color

Question

I want to change the Forground color of a PivotItem Header when Mouse is Over with UWP,I work with windows 10

I tried this code:

<Page.Resources>
        <SolidColorBrush x:Key="mouseOverColor"
                    Color="Red" />
    </Page.Resources>
<Pivot HeaderTemplate="{StaticResource HeaderTemp}" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="10,0,10,0">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Narrow">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="Icon.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True" />
                            <Setter Target="LabelText.(RelativePanel.Below)" Value="Icon" />
                            <Setter Target="LabelText.(RelativePanel.AlignHorizontalCenterWith)" Value="Icon" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Wide">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="500" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="Icon.(RelativePanel.AlignVerticalCenterWithPanel)" Value="True" />
                            <Setter Target="LabelText.(RelativePanel.RightOf)" Value="Icon" />
                            <Setter Target="LabelText.(RelativePanel.AlignVerticalCenterWith)" Value="Icon" />
                            <Setter Target="RelativePanel.Margin" Value="0,0,12,0"/>
                            <Setter Target="Icon.Margin" Value="0,0,0,0"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Pivot.Resources>
                <Style x:Key="myStyle" TargetType="PivotItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="PivotItem">
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver"
                  Value="True">
                                        <Setter Property="Background"
                   Value="{StaticResource mouseOverColor}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                                <ContentPresenter />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Pivot.Resources>
            <PivotItem Header="/images/img.png" Margin="12,10,12,0"  >
                <Grid>
                    .....
                </Grid>
            </PivotItem>

I have an error "The attachable property "Triggers" was not found in in type 'ControlTemplate' have you please any idea how can I change the color of an image when the mouse is over in a universal app thanks for help

Answer 1

You want to change the color of an image, I think it can not be done in the XAML designer, you can do it like this:

XAML code:

    <Pivot>
        <PivotItem>
            <PivotItem.Header>
                <Image x:Name="headerimg" Source="Assets/1.jpg" PointerEntered="pointerEntered" PointerExited="pointerExited"/>
            </PivotItem.Header>
        </PivotItem>
    </Pivot>

key code behind in .cs file:

private async void pointerEntered(object sender, PointerRoutedEventArgs e)
{
    StorageFile imgFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets\\1.jpg"));
    using(IRandomAccessStream streamIn = await imgFile.OpenReadAsync())
    {
        //decoder the img
        BitmapDecoder decoder = await BitmapDecoder.CreateAsync(BitmapDecoder.JpegDecoderId, streamIn);
        //get pixel
        PixelDataProvider proved = await decoder.GetPixelDataAsync(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, new BitmapTransform(),
            ExifOrientationMode.IgnoreExifOrientation, ColorManagementMode.DoNotColorManage);
        byte[] srcData = proved.DetachPixelData();

        // GRAYSCALE
        for (int i = 0; i < srcData.Length; i += 4)
        {
            double b = srcData[i]; //B
            double g = srcData[i + 1]; //G
            double r = srcData[i + 2]; //R
            //average
            double v = (r + g + b) / 3d;
            //replace old rgb
            srcData[i] = srcData[i + 1] = srcData[i + 2] = Convert.ToByte(v);
        }

        WriteableBitmap wbimg = new WriteableBitmap((int)decoder.PixelWidth, (int)decoder.PixelHeight);
        srcData.CopyTo(wbimg.PixelBuffer);
        this.headerimg.Source = wbimg;
    }

}

private async void pointerExited(object sender, PointerRoutedEventArgs e)
{
    StorageFile imgFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets\\1.jpg"));
    IRandomAccessStream streamIn = await imgFile.OpenReadAsync();
    BitmapImage bitmap = new BitmapImage();
    bitmap.SetSource(streamIn);
    this.headerimg.Source = bitmap;
}

To change the color of an image, you need to decode this image, get its RGB values, rewrite these values and turn them back to an image. And there is no Foreground property for an Image control.