如何用随机颜色更改集线器标题的背景并更改hubtile的图像像素?

时间:2014-11-07 14:36:48

标签: c# windows-phone-8

我准备了一个自定义的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 是类的对象。

请任何人为此建议一个有效的解决方案。

感谢。

1 个答案:

答案 0 :(得分:0)

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

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

并在行

下面添加了hubtile代码
Background=new SolidColorBrush(index % colors.Length),

感谢。

希望它有所帮助。