UWP - указатель мыши на PivotItem изменить цвет

Я хочу изменить цвет переднего плана заголовка PivotItem при наведении указателя мыши на UWP, я работаю с 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. Не могли бы вы представить, как я могу изменить цвет изображения при наведении указателя мыши в универсальном приложении, спасибо за помощь


c# xaml win-universal-app windows-10-universal
person user3821206    schedule 15.12.2015    source источник
comment
Возможно, будет проще создать две картинки, сложить их и показать / скрыть при наведении курсора мыши. Или сделайте одно изображение, используйте прозрачный цвет для частей переднего плана, поместите его поверх прямоугольника и измените заливку прямоугольника на основе наведения курсора мыши.   -  person Emond Erno    schedule 18.02.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вы хотите изменить цвет изображения, я думаю, что это невозможно сделать в конструкторе XAML, вы можете сделать это так:

Код XAML:

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

ключевой код в файле .cs:

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, переписать эти значения и вернуть их в изображение. И нет свойства Foreground для элемента управления Image.

person Grace Feng    schedule 15.12.2015
comment
спасибо GraceF за ваш ответ, у меня есть вопрос, пожалуйста, в вашем ответе только одно изображение, если у меня 4 изображения, поэтому следует ли мне использовать массив, а затем применять декодирование к каждому изображению в массиве? - person user3821206; 15.12.2015
comment
Для чего использовать массив? Вы имеете в виду использовать массив для сбора адресов четырех изображений? Каждый раз, когда вы наводите указатель мыши на заголовок, вы хотите изменить цвет 4 изображений вместе? Или каждый раз менять одно изображение? Как бы то ни было, вы можете обернуть этот changecolor код в функцию и вызывать эту функцию каждый раз, когда получаете файл изображения. - person Grace Feng; 15.12.2015
comment
хорошо, спасибо GraceF, я буду использовать функцию, у меня есть 4 изображения, я хочу обернуть цвет изменения для каждого изображения - person user3821206; 15.12.2015