在 WPF 中的应用程序中创建可换肤图像的最佳方法

Posted 2023-02-22

【中文标题】在 WPF 中的应用程序中创建可换肤图像的最佳方法

【英文标题】：Best way to create a skinnable images in application in WPF

【发布时间】：2014-03-05 07:50:29

【问题描述】：

我有一个大的 WPF 应用程序，我必须让它可换肤。我的问题是我有很多用烟花创建的图标（所以它们是矢量图像）。

现在，它们都是白色的。如果我希望整个应用程序有一个蓝色主题，那么我所有的图标都必须是蓝色的。为了做到这一点，我不想用其他人替换图片。有没有办法改变WPF中图像的颜色？具体格式？

【参考方案1】：

在这种情况下，您可以使用DrawingImage。他负责显示Image，它由矢量图的几个部分组成。

DrawingGroup 是一个数字集合，可以从代码中访问并在循环中设置每种所需颜色。

这是一个示例：

XAML

<Window.Resources>
    <DrawingGroup x:Key="drawingGroup">
        <GeometryDrawing Brush="#FF22BAFD" Geometry="F1 M 14.72,15.68L 12.38,15.68L 7.205,5.92L 7.11,5.92L 2.29,15.68L 0,15.68L 6.58,2.56L 7.595,2.56L 14.72,15.68 Z "/>
        <GeometryDrawing Brush="#FF22BAFD" Geometry="F1 M 21.585,25.6C 21.1017,25.6 20.69,25.4275 20.35,25.0825C 20.01,24.7375 19.84,24.3267 19.84,23.85C 19.84,23.37 20.01,22.955 20.35,22.605C 20.69,22.255 21.1017,22.08 21.585,22.08C 22.0783,22.08 22.4975,22.255 22.8425,22.605C 23.1875,22.955 23.36,23.37 23.36,23.85C 23.36,24.3267 23.1875,24.7375 22.8425,25.0825C 22.4975,25.4275 22.0783,25.6 21.585,25.6 Z "/>
        <GeometryDrawing Brush="#FF22BAFD" Geometry="F1 M 28.625,25.6C 28.1417,25.6 27.73,25.4275 27.39,25.0825C 27.05,24.7375 26.88,24.3267 26.88,23.85C 26.88,23.37 27.05,22.955 27.39,22.605C 27.73,22.255 28.1417,22.08 28.625,22.08C 29.1183,22.08 29.5375,22.255 29.8825,22.605C 30.2275,22.955 30.4,23.37 30.4,23.85C 30.4,24.3267 30.2275,24.7375 29.8825,25.0825C 29.5375,25.4275 29.1183,25.6 28.625,25.6 Z "/>
        <GeometryDrawing Brush="#FF22BAFD" Geometry="F1 M 35.665,25.6C 35.1817,25.6 34.77,25.4275 34.43,25.0825C 34.09,24.7375 33.92,24.3267 33.92,23.85C 33.92,23.37 34.09,22.955 34.43,22.605C 34.77,22.255 35.1817,22.08 35.665,22.08C 36.1583,22.08 36.5775,22.255 36.9225,22.605C 37.2675,22.955 37.44,23.37 37.44,23.85C 37.44,24.3267 37.2675,24.7375 36.9225,25.0825C 36.5775,25.4275 36.1583,25.6 35.665,25.6 Z "/>
        <GeometryDrawing Brush="#FF22BAFD" Geometry="F1 M 48.96,25.155L 48.96,28.48L 47.36,28.48L 47.36,25.28C 45.1267,25.28 43.3133,24.8217 41.92,23.905L 41.92,21.12C 42.5267,21.6633 43.3567,22.1192 44.41,22.4875C 45.4633,22.8558 46.4467,23.04 47.36,23.04L 47.36,15.14C 45.08,14.04 43.6033,13.0258 42.93,12.0975C 42.2567,11.1692 41.92,10.0717 41.92,8.805C 41.92,7.30167 42.4325,6.0025 43.4575,4.9075C 44.4825,3.8125 45.7833,3.15667 47.36,2.94L 47.36,9.53674e-007L 48.96,9.53674e-007L 48.96,2.88C 51.12,2.94333 52.6133,3.23333 53.44,3.75L 53.44,6.4C 52.3167,5.60667 50.8233,5.18 48.96,5.12L 48.96,13.24C 51.1733,14.27 52.6867,15.2658 53.5,16.2275C 54.3133,17.1892 54.72,18.2833 54.72,19.51C 54.72,20.9867 54.2117,22.2267 53.195,23.23C 52.1783,24.2333 50.7667,24.875 48.96,25.155 Z M 47.36,12.37L 47.36,5.215C 46.4733,5.38833 45.7717,5.76917 45.255,6.3575C 44.7383,6.94583 44.48,7.66 44.48,8.5C 44.48,9.38 44.6908,10.1017 45.1125,10.665C 45.5342,11.2283 46.2833,11.7967 47.36,12.37 Z M 48.96,15.945L 48.96,22.915C 51.0933,22.4817 52.16,21.4133 52.16,19.71C 52.16,18.29 51.0933,17.035 48.96,15.945 Z "/>
    </DrawingGroup>

    <DrawingImage x:Key="drawingImage" 
                  Drawing="StaticResource drawingGroup" />
</Window.Resources>

<Grid>
    <Image Name="TestImage"
           Source="StaticResource drawingImage"
           Width="100"
           Height="100"/>

    <Button Content="TestClick"
            HorizontalAlignment="Center" 
            VerticalAlignment="Top" 
            Click="Button_Click" />
</Grid>

Code-behind

private void Button_Click(object sender, RoutedEventArgs e)

    DrawingGroup group = this.Resources["drawingGroup"] as DrawingGroup;

    foreach (GeometryDrawing geometry in group.Children)
    
        geometry.Brush = Brushes.Red;
    
 

在此示例中，为每个图形设置Red 颜色。你也可以为每个图形设置不同的颜色，在DrawingGroup中。

或者，如果您的图标适合其中，您可以使用Path。在资源App.xaml、<Window.Resources>等中添加Path with key：

<Path x:Key="MyPath" Data="F1 M 0,0L ..." />

在Style 或其他地方这样使用：

<Path x:Name="MyPathButton"
      ...
      Fill="StaticResource ButtonBackground" 
      Data="Binding Source=StaticResource MyPath, Path=Data" />

【参考方案2】：

如果它们都是矢量图像，那么您应该能够直接导出路径并在您单独应用颜色的Path 中使用它们。

请参阅http://msdn.microsoft.com/en-us/library/ms747393(v=vs.110).aspx 中的 Xaml 缩写语法

和http://www.adobe.com/devnet/fireworks/articles/fw_xaml_panel.html