如何在C＃/ XAML Windows應用商店（Metro UI）應用中混合使用Light和Dark主題？

根據MSDN，設置您的應用主題的標準方式是在頂級Application實例上設置RequestedTheme="Dark"或RequestedTheme="Light"。如何在C＃/ XAML Windows應用商店（Metro UI）應用中混合使用Light和Dark主題？

這對於簡單的應用程序非常適用，但很多時候我發現自己希望更改單個頁面的主題甚至單個控件（例如，在同一應用程序中以光爲主題的文本編輯頁面與黑暗主題的圖像查看器）。

XAML控件具有10s或100s的視覺狀態和顏色定義，並且手動設置它們中的每一個都很乏味，很難100％正確！

有沒有簡單的方法來設置單個控件上的黑暗或光線主題？

來源

2013-02-22 ambrus

對於XAML Windows應用商店，默認的控件外觀在Common/StandardStyles.xaml中定義。如果你曾經看過那個文件，你會注意到很多參考文獻，如{StaticResource ApplicationForegroundThemeBrush}。看起來很有前途...

不幸的是，這些「主題畫筆」沒有在您的應用程序的任何位置定義，並且沒有簡單的方法來設置單個控件的亮或暗覆蓋。但是，有一個答案。

幸運的是there's an excellent blog post by Joe White上的默認主題顏色，其中I've turned into a resource dictionary that you can find here。 Dropbox只做xml預覽，所以你必須重命名文件。

雖然將這些資源複製到您的應用程序本身並無幫助。要使用它們，您需要外科手術覆蓋默認控件樣式以使用它們！

這樣做的一種方法是創建一個新的資源字典，例如，在Common/CustomStyles.xaml，併合併到該應用程序的資源，像這樣：

<Application 
    x:Class="My.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    RequestedTheme="Light"> 

    <Application.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.MergedDictionaries> 

       <!-- 
        Styles that define common aspects of the platform look and feel 
        Required by Visual Studio project and item templates 
       --> 
       <ResourceDictionary Source="Common/ThemeColors.xaml"/> 
       <ResourceDictionary Source="Common/StandardStyles.xaml"/> 
       <ResourceDictionary Source="Common/CustomStyles.xaml"/> 
      </ResourceDictionary.MergedDictionaries> 
     </ResourceDictionary> 
    </Application.Resources> 
</Application>

注意到，我們的默認主題是Light。如果我們想製作一個Dark主題TextBlock，我們複製StandardStyles.xaml的視覺樣式並將其添加到我們的CustomStyles.xaml並進行一些更改。

<Style x:Key="BasicRichTextStyleDark" TargetType="RichTextBlock"> 
    <Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrushDark}"/> 
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/> 
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/> 
    <Setter Property="TextTrimming" Value="WordEllipsis"/> 
    <Setter Property="TextWrapping" Value="Wrap"/> 
    <Setter Property="Typography.StylisticSet20" Value="True"/> 
    <Setter Property="Typography.DiscretionaryLigatures" Value="True"/> 
    <Setter Property="Typography.CaseSensitiveForms" Value="True"/> 
</Style>

請注意，我們已經追加Dark的風格名稱和主題刷定義！您可以通過查找找到並在您的CustomStyles.xaml文件中替換"ThemeBrush}" =>"ThemeBrushDark}"。現在

你可以像這樣創建一個黑暗爲主題的文本塊：

<TextBlock Style="{StaticResource BasicRichTextStyleDark}"/>

當然，你可以使用這種技術用於任何其它類型的控制爲好。有點乏味，但結果是正確的，並不像嘗試手動定義每種顏色一樣糟糕！

這裏沒有魔法。我們只是定義了一些顏色並覆蓋了一個默認樣式，其中一個是我們複製粘貼並修改爲使用我們的顏色的樣式。

來源

2013-02-22 20:18:26 ambrus

您的XAML文件太棒了。節省了很多時間，就像我剛剛開始一個人一樣。每個人都應該有這個副本。我不認爲人們完全理解主題，因爲我遇到了許多應用程序，這些應用程序在從開發它們的主題轉換時似乎會中斷。如果要開始更改默認控件，那麼強制應用程序變爲主題並使用這個xaml創建正確的樣式控件，當你違背選定的主題。 – Oli 2013-03-12 11:56:28

謝謝Oli，很高興這對其他人也有用！ – ambrus 2013-03-17 03:25:03

XAML文件現在是404。你可以上傳到更持久的存儲？也許是github的要點？謝謝！ – 2016-02-20 16:46:44

在文件夾中您有一個StandardStyles.xaml文件。

在這裏您可以找到Metro應用程序默認的所有標準樣式。你需要取消註釋樣式你想使用和添加控制爲StaticResource。

來源

2013-02-22 20:08:20

我在設計我的應用程序「聯繫簿」時也遇到了同樣的問題，因爲我也希望在Dark & Light主題之間進行更改。您的問題：「如何在C＃/ XAML Windows應用商店（Metro UI）應用中混合使用Light和Dark主題？」，我有一個極好的解決方案。

我已經取得兩頁用相同的代碼&相同的內容。我將這兩個頁面添加到另一個上面，然後我在這兩種主題之間進行了動態更改Light &黑暗。我根據用戶的選擇給了用戶一個選項，不管他們是想要黑暗佈局還是Light佈局&。在這種情況下，我成功了。

解決方法二：

如果你想動感的外觀和感覺您的應用程序，那麼你必須要做出自己的靜態佈局類型，然後您可以在該靜態資源綁定您要在其上應用那種風格的頁面。

原諒，如果你沒有找到你的答案在這裏，但我認爲它可以幫助你「黑暗」 &「光」的主題設置你贏8 Metro應用之間的動態變化。

來源

2013-02-23 10:38:14

令人驚訝地似乎沒有提到一種解決方案是在即將使用RequestedTheme =「暗」或RequestedTheme =「光」上單獨控制的元件。

我做了一個應用程序，我需要設置一些appbarbuttons黑暗的設置（這是白色的前景） - 因前景屬性沒有設置這兩個圓和字形本身白：

<AppBarButton Label="Reload all articles" RequestedTheme="Dark" >

這樣，我只是強制控制使用我決定的主題。

來源

2013-12-19 21:45:32 StefanDK

如何在C＃/ XAML Windows應用商店（Metro UI）應用中混合使用Light和Dark主題？

回答

相關問題