根据网格的列宽更改矩形填充答案

【问题标题】：Change Rectangle Fill Based on ColumnWidth of a grid根据网格的列宽更改矩形填充
【发布时间】：2011-02-15 21:03:51
【问题描述】：

基本上我想按照标题所说的那样做，如果列宽是 0.50，那么矩形应该是红色，如果是 0.75，那么它应该是琥珀色，如果是 1，那么它应该是绿色。

我认为我可以使用 DataTriggers 来实现这一点，但由于某种原因，我收到“对象引用未设置为对象的实例”错误，这是我的代码，我在这里遗漏了什么吗？

仅供参考，宽度属性将通过 timer_tick 事件在后端更改。

<Grid x:Name="Grid1" Width="300" Height="30">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="MyColumn1" Width=".50*"></ColumnDefinition>
        <ColumnDefinition x:Name="MyColumn2" Width=".50*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.Triggers>
        <DataTrigger Binding="{Binding ElementName=MyColumn1,Path=Width}" Value=".50*">
            <Setter TargetName="rect" Property="Fill" Value="Red"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding ElementName=MyColumn1,Path=Width}" Value=".75*">
            <Setter TargetName="rect" Property="Fill" Value="Yellow"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding ElementName=MyColumn1,Path=Width}" Value="1">
            <Setter TargetName="rect" Property="Fill" Value="Green"></Setter>
        </DataTrigger>
    </Grid.Triggers>
    <Rectangle x:Name="rect" Grid.Column="0" HorizontalAlignment="Stretch"></Rectangle>
    <Rectangle Grid.Column="1" Fill="Blue"></Rectangle>

</Grid>

【问题讨论】：

标签： wpf styles datatrigger

【解决方案1】：

这对我有用。请注意，我使用Style 在Rectangle 上设置触发器。

<Grid x:Name="Grid1" Width="300" Height="30">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="MyColumn1" Width=".50*"></ColumnDefinition>
        <ColumnDefinition x:Name="MyColumn2" Width=".50*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Rectangle x:Name="rect" Grid.Column="0" HorizontalAlignment="Stretch">
            <Rectangle.Style>
                <Style TargetType="{x:Type Rectangle}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=MyColumn1,Path=Width}" Value=".50*">
                            <Setter Property="Fill" Value="Red"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=MyColumn1,Path=Width}" Value=".75*">
                            <Setter Property="Fill" Value="Yellow"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=MyColumn1,Path=Width}" Value="1">
                            <Setter Property="Fill" Value="Green"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Rectangle.Style>
    </Rectangle>
    <Rectangle Grid.Column="1" Fill="Blue"></Rectangle>
</Grid>

【讨论】：

谢谢，我不敢相信这么简单 :-)