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

时间:2014-03-05 07:50:30

标签: c# wpf image xaml blend

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

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

2 个答案:

答案 0 :(得分:1)

如果它们都是矢量图像,那么您应该能够直接导出路径并在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

答案 1 :(得分: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 x:Key="MyPath" Data="F1 M 0,0L ..." />

Style或其他地方使用如下:

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