如何在运行时更改我的项目模板的颜色答案

【问题标题】：How to change color of my Item template at runtime如何在运行时更改我的项目模板的颜色
【发布时间】：2013-03-30 14:32:38
【问题描述】：

我想在运行时更改网格的颜色，并在 mainpage.xaml 的 gridview 中显示此项目模板...这里我已经尝试过了此项目模板位于 StandardStyle.xaml ...

<DataTemplate x:Key="Standard250x250ItemTemplate">
    <Grid Name="grid1"  HorizontalAlignment="Left" Width="370" Height="200">

        <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="40"></RowDefinition>
            <RowDefinition ></RowDefinition>
        </Grid.RowDefinitions>

        <Border  Grid.ColumnSpan="2" Grid.Row="0" Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="30">
            <!--<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>-->
            <TextBlock Text="{Binding ProjectName}"  FontSize="20" Foreground="#FFCBD3D4" Style="{StaticResource TitleTextStyle}" TextAlignment="Center"/>
        </Border>
        <StackPanel Name="spname" Width="Auto" Grid.Column="0" Grid.Row="1" Orientation="Vertical"  Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" VerticalAlignment="Stretch">
            <TextBlock Text=" Project Code   "  FontSize="25" TextWrapping="NoWrap" Foreground="{StaticResource  ListViewItemOverlaySecondaryForegroundThemeBrush}" Height="50" Width="200" TextAlignment="Left" />
            <TextBlock Text=" ProjectManager"  FontSize="25" TextWrapping="NoWrap" Foreground="{StaticResource  ListViewItemOverlaySecondaryForegroundThemeBrush}" Height="50" Width="200"  TextAlignment="Left" />
            <TextBlock Text=" Project Status " FontSize="25" TextWrapping="NoWrap" Foreground="{StaticResource  ListViewItemOverlaySecondaryForegroundThemeBrush}" Height="50" Width="200"  TextAlignment="Left" />
        </StackPanel>
        <StackPanel Name="sp1" Width="200" Orientation="Vertical" Grid.Column="1"  Grid.Row="1"  Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Text="{Binding ProjectCode}" FontSize="25" TextWrapping="NoWrap" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Height="50" TextAlignment="Center" />
            <TextBlock  Text="{Binding ProjectManagerName}" FontSize="25" TextWrapping="NoWrap" Foreground="{StaticResource  ListViewItemOverlaySecondaryForegroundThemeBrush}" Height="50" TextAlignment="Center"  />
            <TextBlock x:Name="statusblock" Text="{Binding ProjectStatus}" FontSize="25" TextWrapping="NoWrap" Foreground="{StaticResource  ListViewItemOverlaySecondaryForegroundThemeBrush}" Height="50" TextAlignment="Center"  />
        </StackPanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup  x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition From="Normal" To="Colored"  GeneratedDuration="00:00:01"></VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Colored">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="grid1" Storyboard.TargetProperty="Background" To="Red" >
                 </ColorAnimation>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</DataTemplate>

【问题讨论】：

标签： c# xaml mvvm windows-store-apps

【解决方案1】：

使用 mvvm，我会将网格颜色绑定到视图模型中的一个属性，然后您可以随时通过“代码”更改颜色：

 private System.Windows.Media.Brush _foregroundColor = System.Windows.Media.Brushes.DarkSeaGreen;

  public System.Windows.Media.Brush ForegroundColor
    {
        get { return _foregroundColor; }
        set
        {
            _foregroundColor = value;
            OnPropertyChanged("ForegroundColor");
        }
    }

确保实现 iNotifyPropertyChanged 以通知 UI 更改

这里是 xaml

 <Grid Background="{Binding Path=ForegroundColor}" />

【讨论】：

【解决方案2】：

如果您想根据some property 更改Grid color，您可以使用view-model
你也可以这样做......

<DataTemplate>
    ...
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=Status}" Value="Error">
            <Setter Property="Background" Value="Red" TargetName="grid1" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

就个人而言，我总是绑定到“状态”类型的属性。
然后使用data trigger 或直接绑定<Grid Foreground="{Binding Status, Converter=statusToColor}" /> 并使用转换器“翻译”。

（我不确定你是真的在做某种动画还是只是试错？）

【讨论】：