1

VS2012 で提供されているテンプレートの 1 つを使用して、アプリの設計を開始しています。ここでは、いくつかの TextBlocks の横に画像が表示されています。ユーザーが写真などを画像として選択できるようにしたいのですが、これを行っていない場合は、デフォルトのアイコンを提供したいと考えています。

私の最初の考えは、画像アイコンが表示されるさまざまなサイズでさまざまなデフォルトアイコンのPNGを作成し、ユーザーが画像を指定していない場合はバインディングからそれらを返すことでしたが、使用できる場合代わりに XAML パスを使用すると、既定のアイコンはビットマップではなくベクターとして描画されるため、より鮮明に表示されます。

その決定が間違いであるかどうかはわかりませんが、頭痛の種になっています :-(.

私が解決しようとした最初の課題は、バインディングを使用して画像または XAML パスを表示する方法です。ここでの私の解決策は、イメージの代わりにボタンを使用し、コンテンツをバインドすることでした。Content バインディングは、Image またはアイコンを定義するパスのセットを保持する Canvas オブジェクトを返します。

これは、スナップされたビューに変更するまで機能します。スナップされたビューに変更すると、スナップされていないビューよりもイメージ/ボタン要素が小さくなります。

したがって、2 番目の課題であり、この質問の主な理由は、さまざまなサイズのボタンに対処する最善の方法についてアドバイスを求めることです。スナップされていないビューでは、ボタンは 110x110 です。スナップ ビューでは、ボタンは 60x60 です。私が行った調査では、パスのサイズを変更する最も簡単な方法は、Canvas で Transform を使用することのようですが、Canvas は Binding 呼び出しから返されるため、コード ビハインドは必ずしも親のサイズを認識しません。 Button は であるため、Transform を含めることはできません。

DrawingBrush は Windows ストア アプリでは無効であるため、使用できません。

これに対する明確な解決策はありますか、それとも、事前に作成された PNG を使用する、より単純ではあるがわずかに低品質の解決策に戻る必要がありますか?

ありがとう。

4

1 に答える 1

0

最終的に私が採用した解決策は、ボタンと画像の 2 つのアイテムを使用することでした。それぞれを境界線で囲み、ビットマップ画像が利用可能かどうかに応じて、アイテムの 1 つだけを表示できるようにしました。

            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="250" Height="250" Visibility="{Binding ImageIsAvailable, Converter={StaticResource HideIfTrue}}">
            <Button Content="{Binding ImageContent}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,20,0,0" Style="{StaticResource UnstyledGraphicsButtonStyle}" Width="{Binding ImageWidth210}" Height="{Binding ImageHeight210}" Foreground="white" Padding="0" Background="Transparent" BorderBrush="{x:Null}" IsEnabled="False" />
        </Border>
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Visibility="{Binding ImageIsAvailable, Converter={StaticResource DisplayIfTrue}}">
            <Image Source="{Binding Image250}" Stretch="{Binding Stretch250}" AutomationProperties.Name="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>

この例では、アイテムを 250px x 250px にしたいと考えています。Stretch のバインドは、250px よりも大きい画像と小さい画像を処理し、それに応じて伸縮できるようにするためのものです。

ボタンの場合、コンテンツは実際には宣言された文字列リソースから取得されます。次に例を示します。

<x:String x:Key="building">M13.982995,32.651007L13.982995,37.332006 18.665994,37.332006 18.665994,32.651007z M5.3319988,32.440006L5.3319988,37.332006 10.225996,37.332006 10.225996,32.440006z M34.665606,29.33198L34.665606,37.313 37.332797,37.313 37.332797,29.33198z M29.332198,29.33198L29.332198,37.340984 31.999405,37.340984 31.999405,29.33198z M13.923995,24.000005L13.923995,28.740005 18.665994,28.740005 18.665994,24.000005z M5.3319988,24.000005L5.3319988,28.839005 10.171997,28.839005 10.171997,24.000005z M34.665606,18.665992L34.665606,26.684976 37.332797,26.684976 37.332797,18.665992z M29.332198,18.665992L29.332198,26.644998 31.999405,26.644998 31.999405,18.665992z M13.331995,16.000003L13.331995,18.666003 15.998995,18.666003 15.998995,16.000003z M7.9989967,16.000003L7.9989967,18.666003 10.665997,18.666003 10.665997,16.000003z M26.665998,13.331976L39.998998,13.331976 39.998998,42.666973 26.665998,42.666973z M13.331995,10.666002L13.331995,13.332002 15.998995,13.332002 15.998995,10.666002z M7.9989967,10.666002L7.9989967,13.332002 10.665997,13.332002 10.665997,10.666002z M10.665997,0L13.331995,0 13.331995,5.3340011 15.998995,5.3340011 18.665994,10.666002 18.665994,18.666003 21.331993,18.666003 23.998992,21.332004 23.998992,42.667007 0,42.667007 0,21.332004 2.6659985,18.666003 5.3319988,18.666003 5.3319988,10.666002 7.9969978,5.3340011 10.665997,5.3340011z</x:String>

これはメトロスタジオから来ています。

高さと幅のバインディングは、異なる SVG アイテムの幅と高さの比率が異なるため、コード ビハインドにバインドして目的のサイズの正しい数値を返すためです。残念ながら、パラメーターを渡すことができないため、XAML に応じて、XXX のさまざまな値に対してさまざまな "ImageHeightXXX" 呼び出しを行うことになります。

文字列を定義する方法に関するアドバイスは、http ://www.jayway.com/2012/11/27/styling-windows-8-4-the-button/ にあります。

于 2013-01-12T10:18:40.503 に答える