XAML 中元素的条件样式答案

【问题标题】：Conditional styling of an element in XAMLXAML 中元素的条件样式
【发布时间】：2013-12-11 00:29:46
【问题描述】：

我正在构建一个具有以下视图模型属性的 Windows phone 8 应用程序：

public bool IsReply {get; set;}

在我的xaml代码中，我想区分两种情况：

IsReply=True
```
<Grid Margin="0,0,0,0">
...
</Grid>
```
IsReply=False
```
<Grid Margin="40,0,0,0">
...
</Grid>
```

基本上，我想根据 IsReply 的值设置 Grid 元素的样式。我知道在 WPF Style.Triggers 中存在，但显然不在 WP 中。我现在的解决方案是拥有整个网格代码的副本，并将每个网格代码的可见性设置为数据转换器。但是，我觉得这应该更简单。

【问题讨论】：

你应该写你自己的ValueConverter:wpf-tutorial.com/data-binding/…。你的转换器应该返回Thickness struct instance。
谢谢！这很有效。
@MarcinJuraszek 我知道这已经过时了，但您介意添加您的评论作为答案吗？

标签： c# xaml windows-phone-8

【解决方案1】：

最简单的方法是使用带触发器的样式：

<Grid>
    <Grid.Style>
        <Style TargetType="Grid">
            <Setter Property="Margin" Value="40 0 0 0"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsReply}" Value="True">
                    <Setter Property="Margin" Value="0 0 0 0"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
</Grid>

【讨论】：

对不起，你是对的。我在 WPF 上下文中。使用转换器，我自己在 WP8 中完成了这个

【解决方案2】：

您可以在MVVM 中绑定grid 的margin

<Grid Margin="{Binding margin}">
 ...
</Grid>

在你的模型中

if(IsReply)
  margin = new Thickness("0,0,0,0");
else
  margin = new Thickness("40,0,0,0");

无需创建单独的网格。

【讨论】：

你不应该在你的视图模型中添加视图代码。更好的方法是使用问题评论中建议的转换器或样式
是的，我试图避免这种情况。

【解决方案3】：

您可以使用DataTrigger，但是您必须添加这两个引用（右键单击项目中的References 和AddReference/Assemblies/Extensions/ ...）。

xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

<Grid
    Margin="0">

    <i:Interaction.Triggers>

        <ei:DataTrigger
            Binding="{Binding Path=IsReply}"
            Value="True">

            <ei:ChangePropertyAction
                PropertyName="Margin"
                Value="0" />

        </ei:DataTrigger>

        <ei:DataTrigger
            Binding="{Binding Path=IsReply}"
            Value="False">

            <ei:ChangePropertyAction
                PropertyName="Margin"
                Value="40,0,0,0" />

        </ei:DataTrigger>

    </i:Interaction.Triggers>

</Grid>

【讨论】：