如何用随机颜色更改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是类的对象。
请任何人提出一个可行的解决方案。
谢谢。
使用颜色数组，我实现了第一点。
Color[] colors=new Color{Colors.Red,Colors.Blue,Colors.White}
以及在行下方添加的集线器代码
Background=new SolidColorBrush(index % colors.Length),
谢谢。
希望它能帮助到别人。