1

以下に定義されている DataTemplate があります

<DataTemplate x:Key="IconTextDataTemplate">
        <StackPanel Orientation="Horizontal" Width="220" Height="60">
            <Border Background="#66727272" Width="40" Height="40" Margin="10">
                <Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
            </Border>
            <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                <TextBlock Text="{Binding Path=Title}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
                <TextBlock  Text="{Binding Path=NumberOfPhotos}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

次に、DataTemplate を使用する GridView を用意します。

<GridView x:Name="gv" Grid.Row="0" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" 
                  Width="Auto" Height="Auto" SelectionMode="Multiple" ItemTemplate="{StaticResource IconTextDataTemplate}" ItemsSource="{Binding}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid MaximumRowsOrColumns="8" 
                  VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Center" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>

次に、GridViews dataContext をコレクションに設定します

gv.DataContext = setCollection;

オブジェクト setCollection は、NumberOfPhotos および Title のプロパティを持つオブジェクトのコレクションであるため、バインディング

<TextBlock Text="{Binding Path=Title}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
                <TextBlock  Text="{Binding Path=NumberOfPhotos}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>

動作します。ただし、オブジェクトには ImageSource のプロパティがありません

<Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>

オブジェクトのプロパティにバインドする代わりに、次のように、2 つの文字列とオブジェクトのプロパティで構成される複合構造にバインドしたいと考えています。

ImageSource = "/files/thumbnails/" + {Binding Path=Title} + fileType;

したがって、評価されると、ImageSource は次のようになります。

/files/thumbnails/titleOfObject.png

ここで、titleOfObject はその値と同じです

<TextBlock Text="{Binding Path=Title}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />

どうすればこれを実現できますか?

4

1 に答える 1

0

バインドされたオブジェクトを ViewModel として表示する方がよいでしょう。概念的には、ViewModel オブジェクトの役割は、表示するデータを準備することです。これには、ソース属性にバインドされるようにタイトルをマッサージすることなどが含まれます。したがって、オブジェクト (または派生オブジェクト、またはオブジェクトの正式な ViewModel) で、その計算を行うプロパティを作成します。

public string TitleImageSource
{
    get
    {
        return string.Format(@"/files/thumbnails/{0}{1}", this.Title, fileType);
    }
}

次に、イメージ内のそのプロパティにバインドします。

別の方法は、バインディング用のコンバーターを作成することです。コンバーターは次のようなものです。

public sealed class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return string.Format(@"/files/thumbnails/{0}{1}", value, parameter);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return string.Empty;
    }
}

次に、Image タグの Source バインディングでそのコンバーターを参照します。

于 2013-01-22T16:14:10.947 に答える