Windows應用商店：在網格佈局中使用XAML路徑（C＃/ XAML）

Question

我開始使用VS2012提供的模板之一開始設計我的應用，其中一些圖像顯示在某些TextBlocks旁邊。我希望用戶能夠選擇一張照片或類似的圖像，但如果他們沒有這樣做，我想提供一個默認圖標。

我最初的想法是創建不同的默認圖標的PNG，圖像圖標出現在不同的大小，只是從綁定返回，如果用戶沒有指定圖像，但它發生在我身上如果我可以使用XAML Paths，則默認圖標將顯得更加清晰，因爲它們將被繪製爲矢量而不是位圖。

我不知道，如果這個決定是錯誤的，但它造成了我幾個頭疼:-(。

我試圖要解決的第一個挑戰是如何利用結合顯示無論是圖片或XAML Paths。我的解決方案是使用Button來代替Image，並綁定Content。Content綁定返回一個Canvas對象，該對象包含圖像或定義該圖標的一組Path。

工作正常直到我切換到快照視圖，然後它具有比未拍攝視圖更小的圖像/按鈕元素。

因此，seco挑戰，這個問題的主要原因是尋求建議如何最好地處理不同大小的按鈕。在未綁定的視圖中，按鈕是110x110。在快照視圖中，按鈕是60x60。在我所做的研究中，調整路徑大小的最簡單方法似乎是在Canvas上使用Transform，但由於Canvas是從Binding調用返回的，因此代碼隱藏不一定知道父級的大小按鈕是，因此將不能包含變換。

我無法使用DrawingBrush，因爲這些在Windows應用商店應用中無效。

是否有一個乾淨的解決方案，或者我應該回到使用預先創建的PNG的更簡單但質量稍低的解決方案？

謝謝。

Answer 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的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/