Silverlight 4：用一点逻辑显示数据的模式？

Question

我正在构建一个wp7应用程序。

我有一个UserControl，显示新闻文章标题，预告片和图像。整个类是很短：

public partial class StoryControl : UserControl 
{ 
    public Story Story { get; private set; } 

    public StoryControl() 
    { 
     InitializeComponent(); 
    } 

    internal StoryControl(Story story) : this() 
    { 
     this.Story = story; 
     Teaser.Text = story.Teaser; 
     Headline.Text = story.Title; 

     if (story.ImageSrc == null) 
     { 
      Thumbnail.Visibility = Visibility.Collapsed; 
     } else 
     { 
      Thumbnail.Source = new BitmapImage(story.ImageSrc); 
     } 
    } 
} 

以及相应的XAML：

<Grid x:Name="LayoutRoot" Background="Transparent" Margin="0,0,0,20"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Image x:Name="Thumbnail" Grid.Column="0" Width="89" HorizontalAlignment="Left" VerticalAlignment="Top" /> 

    <!-- sometimes there's a hanging word in the headline that looks a bit awkward --> 
    <TextBlock x:Name="Headline" Grid.Column="1" Grid.Row="0" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" HorizontalAlignment="Left" FontSize="23.333" VerticalAlignment="Top" /> 
    <TextBlock x:Name="Teaser" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" VerticalAlignment="Top" Width="384"/> 
</Grid> 

有没有办法做用更少的代码隐藏和XAML多？使用绑定的一些方法可将Headline和Teaser的文本绑定到Story的属性，而如果Story为空则不会崩溃？

关于该图像？我在那里有一些逻辑;有没有办法在XAML中自动执行该操作，或者我坚持使用C＃？

Answer 1

看起来像一个视图模型是为了：

public class StoryViewModel 
{ 
    readonly Story story; 

    public StoryViewModel(Story story) 
    { 
     this.story = story; 
    } 

    public string Teaser { get { return story == null ? "" : story.Teaser; } } 
    public string Title { get { return story == null ? "" : story.Title; } } 
    public bool IsThumbnailVisible { get { return story != null && story.ImageSrc != null; } } 
    public BitmapImage Thumbnail { get { return IsThumbnailVisible ? new BitmapImage(story.ImageSrc) : null; } } 
} 

让您的代码隐藏简单好用：

public partial class StoryControl : UserControl 
{ 
    public Story Story { get; private set; } 

    public StoryControl() 
    { 
     InitializeComponent(); 

    } 

    internal StoryControl(Story story) 
     : this() 
    { 
     this.DataContext = new StoryViewModel(story); 
    } 
} 

而且你的XAML成为一组绑定：

<Grid x:Name="LayoutRoot" Background="Transparent" Margin="0,0,0,20"> 
    <Grid.Resources> 
     <BooleanToVisibilityConverter x:Key="booleanToVisiblityConverter"/> 
    </Grid.Resources> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Image Visibility="{Binding IsThumbnailVisible, Converter={StaticResource booleanToVisiblityConverter}}" Source="{Binding Thumbnail}" Grid.Column="0" Width="89" HorizontalAlignment="Left" VerticalAlignment="Top" /> 

    <!-- sometimes there's a hanging word in the headline that looks a bit awkward --> 
    <TextBlock Text="{Binding Title}" Grid.Column="1" Grid.Row="0" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" HorizontalAlignment="Left" FontSize="23.333" VerticalAlignment="Top" /> 
    <TextBlock Text="{Binding Teaser}" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" VerticalAlignment="Top" Width="384"/> 

</Grid> 

好，只需通过fallbackvalues和更复杂的model（story）和view（xaml）就可以做到这一点转换器，但我希望你会发现，viewmodels给你在测试，无砖墙，视图特定的逻辑方面最强大的...