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給你在測試，無磚牆，視圖特定的邏輯方面最強大的...