UWP - PivotItem 鼠标悬停在更改颜色上 [英] UWP - PivotItem mouse over change color

问题描述

当鼠标悬停在 UWP 上时，我想更改 PivotItem Header 的 Forground 颜色，我使用的是 Windows 10

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

我试过这个代码:

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

我有一个错误在‘ControlTemplate’类型中找不到可附加属性‘触发器’请问您知道如何在通用应用程序中鼠标悬停时更改图像的颜色吗感谢帮助

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

推荐答案

你想改变一个图像的颜色，我觉得在 XAML 设计器中是做不到的，你可以这样做:

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 代码:

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

.cs 文件中的关键代码:

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

要更改图像的颜色，您需要解码该图像，获取其 RGB 值，重写这些值并将它们转换回图像.Image 控件没有 Foreground 属性.

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.

这篇关于UWP - PivotItem 鼠标悬停在更改颜色上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！