如何用随机颜色更改hubtitle的背景,并更改hubtile的图像像素

本文关键字:hubtile 像素 图像 hubtitle 何用随 颜色 背景 | 更新日期: 2023-09-27 18:29:30

我准备了一个自定义hubtile,它有一个图像和textbloxk,用于显示所需的图像和文本。我已经将瓷砖的背景颜色硬编码为白色,现在有人可以建议如何用多种颜色更改瓷砖的背景吗?也有人可以提议更改图像的颜色(即更改来自用作HubTile源的服务器的图像像素)。我一直在使用以下代码

xaml文件代码

<Style x:Key="HomePageTabStyle"
       TargetType="toolkit:HubTile">
    <Setter Property="Height"
            Value="173" />
    <Setter Property="Width"
            Value="173" />
   <Setter Property="Background"
            Value="White" />
    <!--<Setter Property="Background"
            Value="{StaticResource PhoneAccentBrush}" />-->
    <Setter Property="Foreground"
            Value="#FFFFFFFF" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="toolkit:HubTile">
                <Border x:Name="Container">
                    <Border.Resources>
                        <CubicEase x:Key="HubTileEaseOut"
                                   EasingMode="EaseOut" />
                    </Border.Resources>
                    <Border.Height>
                        <Binding Converter="{StaticResource HeightConverter}"
                                 Path="Size"
                                 RelativeSource="{RelativeSource TemplatedParent}" />
                    </Border.Height>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ImageStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition x:Name="ExpandedToSemiexpanded"
                                                  From="Expanded"
                                                  GeneratedDuration="0:0:0.85"
                                                  To="Semiexpanded">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                                       Storyboard.TargetName="TitlePanel">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.85"
                                                                  Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
                                                                       Storyboard.TargetName="ViewportProjection">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="0.0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition x:Name="SemiexpandedToExpanded"
                                                  From="Semiexpanded"
                                                  GeneratedDuration="0:0:0.85"
                                                  To="Expanded">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                                       Storyboard.TargetName="TitlePanel">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.85"
                                                                  Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition x:Name="SemiexpandedToCollapsed"
                                                  From="Semiexpanded"
                                                  GeneratedDuration="0:0:0.85"
                                                  To="Collapsed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                                       Storyboard.TargetName="TitlePanel">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.85"
                                                                  Value="0.0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition x:Name="CollapsedToExpanded"
                                                  From="Collapsed"
                                                  GeneratedDuration="0:0:0.85"
                                                  To="Expanded">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                                       Storyboard.TargetName="TitlePanel">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="0.0" />
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.85"
                                                                  Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition x:Name="ExpandedToFlipped"
                                                  From="Expanded"
                                                  GeneratedDuration="0:0:0.85"
                                                  To="Flipped">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                                       Storyboard.TargetName="TitlePanel">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                       Storyboard.TargetName="Image">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.185"
                                                                    Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                       Storyboard.TargetName="BackPanel">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.185"
                                                                    Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
                                                                       Storyboard.TargetName="ViewportProjection">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="0.0" />
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.85"
                                                                  Value="180.0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition x:Name="FlippedToExpanded"
                                                  From="Flipped"
                                                  GeneratedDuration="0:0:0.85"
                                                  To="Expanded">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                                       Storyboard.TargetName="TitlePanel">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                       Storyboard.TargetName="Image">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.185"
                                                                    Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                       Storyboard.TargetName="BackPanel">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.185"
                                                                    Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
                                                                       Storyboard.TargetName="ViewportProjection">
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.0"
                                                                  Value="180.0" />
                                            <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
                                                                  KeyTime="0:0:0.85"
                                                                  Value="360.0" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     To="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                     Storyboard.TargetName="TitlePanel" />
                                    <DoubleAnimation Duration="0"
                                                     To="0.0"
                                                     Storyboard.TargetProperty="RotationX"
                                                     Storyboard.TargetName="ViewportProjection" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                   Storyboard.TargetName="Image">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Semiexpanded">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     To="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                     Storyboard.TargetName="TitlePanel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Collapsed" />
                            <VisualState x:Name="Flipped">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     To="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                                     Storyboard.TargetName="TitlePanel" />
                                    <DoubleAnimation Duration="0"
                                                     To="180.0"
                                                     Storyboard.TargetProperty="RotationX"
                                                     Storyboard.TargetName="ViewportProjection" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                   Storyboard.TargetName="Image">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                   Storyboard.TargetName="BackPanel">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border.Width>
                        <Binding Converter="{StaticResource WidthConverter}"
                                 Path="Size"
                                 RelativeSource="{RelativeSource TemplatedParent}" />
                    </Border.Width>
                    <StackPanel x:Name="Viewport"
                                Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                                Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
                        <StackPanel.Projection>
                            <PlaneProjection x:Name="ViewportProjection"
                                             CenterOfRotationY="0.25" />
                        </StackPanel.Projection>
                        <Grid x:Name="TitlePanel"
                              Height="{Binding Size, ConverterParameter=2, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                              RenderTransformOrigin="0.5,0.5"
                              Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Grid.RenderTransform>
                                <CompositeTransform />
                            </Grid.RenderTransform>
                            <Grid x:Name="BackPanel"
                                  Background="{TemplateBinding Background}"
                                  Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                                  Grid.Row="1"
                                  Visibility="Collapsed"
                                  Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
                                <Grid.Projection>
                                    <PlaneProjection CenterOfRotationY="0.5"
                                                     RotationX="180" />
                                </Grid.Projection>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <!--Foreground="{TemplateBinding Foreground}"-->
                                <!--<TextBlock x:Name="NotificationBlock"
                                           Foreground="Gray"
                                           FontSize="{StaticResource PhoneFontSizeMediumLarge}"
                                           FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                           LineStackingStrategy="BlockLineHeight"
                                           LineHeight="32"
                                           Margin="8,8,0,6"
                                           Grid.Row="0"
                                           TextWrapping="Wrap"
                                           Text="{TemplateBinding Notification}" />-->
                                <!--Foreground="{TemplateBinding Foreground}"-->
                                <!--<TextBlock x:Name="MessageBlock"
                                           Foreground="{StaticResource AppFontColor}"
                                           FontSize="{StaticResource PhoneFontSizeMediumLarge}"
                                           FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                           LineStackingStrategy="BlockLineHeight"
                                           LineHeight="23.333"
                                           Margin="10,10,10,6"
                                           Grid.Row="0"
                                           TextWrapping="Wrap"
                                           Text="{TemplateBinding Message}" />-->
                                <!--Foreground="{TemplateBinding Foreground}"-->
                                <!--<TextBlock x:Name="BackTitleBlock"
                                           Foreground="Gray"
                                           FontSize="{StaticResource PhoneFontSizeMediumLarge}"
                                           FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                           Margin="10,0,0,6"
                                           Grid.Row="1"
                                           TextWrapping="Wrap"
                                           VerticalAlignment="Bottom" />-->
                            </Grid>
                            <Border x:Name="Image"
                                    Background="{TemplateBinding Background}"
                                    Grid.Row="1">
                                <Image Height="80"
                                       Width="90"
                                       Margin="0,0,0,35"
                                       Source="{TemplateBinding Source}"
                                       Stretch="Uniform"/>
                                <!--<Image Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                                       Source="{TemplateBinding Source}"
                                       Stretch="Uniform"
                                       Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}" />-->
                            </Border>
                            <!--Foreground="{TemplateBinding Foreground}"-->
                            <TextBlock Foreground="Black"
                                       Grid.Row="2"
                                       FontSize="{StaticResource PhoneFontSizeNormal}"
                                       FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                       LineStackingStrategy="BlockLineHeight"
                                       LineHeight="27"
                                       MaxHeight="54"
                                       TextTrimming="WordEllipsis"
                                       Margin="10,0,0,6"
                                       TextWrapping="Wrap"
                                       Text="{TemplateBinding Title}"
                                       VerticalAlignment="Bottom" />
                        </Grid>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

C#文件因为它是

tile = new HubTile()
                {
                    Name = currentTab.TAB_ID,
                    Title = currentTab.TAB_NAME,
                    Message = currentTab.TAB_NAME,
                    Notification = currentTab.DESCRIPTION,
                    Source = new BitmapImage(new Uri(currentTab.ICON_URL, UriKind.RelativeOrAbsolute)),
                    IsFrozen = true,
                    //Foreground = tabForegroundBrush,
                    //Background = tabBackgroungBrush,
                    DataContext = currentTab,
                    Margin = new Thickness(4),
                    Style = App.Current.Resources["HomePageTabStyle"] as Style,
                    Size = TileSize.Medium
                };

这里currentTab是类的对象。

请任何人提出一个可行的解决方案。

谢谢。

如何用随机颜色更改hubtitle的背景,并更改hubtile的图像像素

使用颜色数组,我实现了第一点。

Color[] colors=new Color{Colors.Red,Colors.Blue,Colors.White}

以及在行下方添加的集线器代码

Background=new SolidColorBrush(index % colors.Length),

谢谢。

希望它能帮助到别人。