一个基本的WPF性能问题

Question

我是一名设计师，我需要理解为什么我在Expression Blend中创建的应用程序运行得如此之慢。实验表明，具有大量元素的背景对问题贡献最大。我知道有很多关于优化WPF性能的讨论和文章，但是对于那些不了解背后代码的人来说，它们是无用的。我想知道是否有人可以查看Blend中生成的背景的XAML代码，并告诉我那里完全错误。我们认为背景必须在向量中，因为用户可以缩放应用程序窗口。或者也许有一种方法可以使用位图作为背景，这可以在不损失质量和性能的情况下进行扩展？

Data =“”标签中的代码中有很长的符号序列，我将其删除以使其更小。我不相信任何人都可以阅读它们。

像这样，例如： “F1 M 410.527,254.36L 749.013,254.361C 754.222,254.361 758.369,258.954 758.369,263.496L 758.364,296.53C 758.364,296.53 400.696,272.805 400.696,476.456C 400.696,524.289 400.555,333.192 400.555,264.384C 400.555,259.006 404.212， 254.36 410.527,254.36 Z“

它们不是问题的原因。他们出现是因为我从Expression Design导出了整个东西。当我用Blend中创建的相同省略号替换它们时，这个标签没有出现，并且它没有变得更好。

所以，这是代码。谢谢你试图帮助我！

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Name="Main_menu" Width="1920" Height="1080" Clip="F1 M 0,0L 1920,0L 1920,1080L 0,1080L 0,0">
<Canvas x:Name="Layer_10" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="0">
    <Rectangle x:Name="Rectangle" Width="1919.99" Height="1079.99" Canvas.Left="0.00744629" Canvas.Top="0.00744629" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="#FF000000">
        <Rectangle.Fill>
            <RadialGradientBrush RadiusX="0.6425" RadiusY="1.14223" Center="0.492973,1.03887" GradientOrigin="0.492973,1.03887">
                <RadialGradientBrush.RelativeTransform>
                    <TransformGroup/>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FF0080FF" Offset="0"/>
                <GradientStop Color="#FF024BA5" Offset="0.472441"/>
                <GradientStop Color="#FF04174C" Offset="1"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>
<Canvas x:Name="Layer_13" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="0">
    <Path x:Name="Path" Width="1435.59" Height="1490.63" Canvas.Left="345.348" Canvas.Top="-242.593" Stretch="Fill" Data=" ">
        <Path.Fill>
            <LinearGradientBrush StartPoint="0.493634,1.09725" EndPoint="0.493634,-0.00832516">
                <GradientStop Color="#1006005A" Offset="0.00465116"/>
                <GradientStop Color="#1000D0FF" Offset="1"/>
            </LinearGradientBrush>
        </Path.Fill>
        <Path.Effect>
            <BlurEffect Radius="100" RenderingBias="Quality"/>
        </Path.Effect>
    </Path>
</Canvas>
<Path x:Name="Path_67" Width="369.444" Height="278.75" Canvas.Left="394.773" Canvas.Top="248.532" Stretch="Fill" StrokeThickness="6.66667" StrokeLineJoin="Round" Stroke="#43BFEAFF" Data=" ">
    <Path.Fill>
        <LinearGradientBrush StartPoint="0.5,1.17585" EndPoint="0.5,-0.175854">
            <GradientStop Color="#4300236A" Offset="0.150862"/>
            <GradientStop Color="#43FFFFFF" Offset="1"/>
        </LinearGradientBrush>
    </Path.Fill>
    <Path.Effect>
        <DropShadowEffect BlurRadius="38" ShadowDepth="0" Opacity="1" Color="#FF000000" Direction="270"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_72" Width="357.814" Height="229.689" Canvas.Left="400.555" Canvas.Top="254.36" Stretch="Fill" Fill="#10FFFFFF" Data=" "/>
<Ellipse x:Name="Ellipse" Width="50" Height="50" Canvas.Left="1248" Canvas.Top="214" Stretch="Fill" Fill="#1500ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="49"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_0" Width="46" Height="46" Canvas.Left="1346" Canvas.Top="792" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_1" Width="100" Height="100" Canvas.Left="96" Canvas.Top="-52" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_2" Width="82" Height="82" Canvas.Left="1406" Canvas.Top="696" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_3" Width="77.918" Height="77.918" Canvas.Left="1386.08" Canvas.Top="114.082" Stretch="Fill" Fill="#2800ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_4" Width="64" Height="64" Canvas.Left="877.918" Canvas.Top="582.207" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="57.4"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_5" Width="36" Height="36" Canvas.Left="1515.92" Canvas.Top="750.207" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="50"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_6" Width="82.949" Height="82.949" Canvas.Left="1038.55" Canvas.Top="102.5" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_7" Width="30" Height="30" Canvas.Left="797.918" Canvas.Top="220.207" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="100"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_8" Width="56" Height="56" Canvas.Left="384" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="100"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_9" Width="34" Height="34" Canvas.Left="919.418" Canvas.Top="558.707" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="49.9"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_10" Width="42" Height="42" Canvas.Left="1103.92" Canvas.Top="408.207" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="30.3"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_11" Width="16" Height="16" Canvas.Left="1567.92" Canvas.Top="698.207" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="50"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_12" Width="38" Height="38" Canvas.Left="1541.42" Canvas.Top="580.707" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="50"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_13" Width="30.082" Height="30.081" Canvas.Left="1889.92" Canvas.Top="376.207" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="100"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_14" Width="40" Height="40" Canvas.Left="1797.92" Canvas.Top="144.207" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="100"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_15" Width="26" Height="26" Canvas.Left="1255.92" Canvas.Top="960.207" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="50.9"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_16" Width="20" Height="20" Canvas.Left="1344" Canvas.Top="830" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="50"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_17" Width="34" Height="34" Canvas.Left="1199.92" Canvas.Top="670.207" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="50"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_18" Width="55.022" Height="55.022" Canvas.Left="120.873" Canvas.Top="215.197" Stretch="Fill" Fill="#3400A9FF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_19" Width="29.443" Height="29.443" Canvas.Left="104.449" Canvas.Top="290.788" Stretch="Fill" Fill="#3400A9FF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_20" Width="60.533" Height="60.533" Canvas.Left="1211.47" Canvas.Top="851.467" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_21" Width="27.335" Height="27.335" Canvas.Left="712.54" Canvas.Top="992.388" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_22" Width="66.436" Height="66.436" Canvas.Left="960" Canvas.Top="984" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="72.2"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_23" Width="46.642" Height="46.642" Canvas.Left="1177.36" Canvas.Top="577.358" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="50"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_24" Width="148.28" Height="148.28" Canvas.Left="1056" Canvas.Top="1003.72" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_25" Width="144" Height="144" Canvas.Left="648" Canvas.Top="216" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="53"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_26" Width="181.12" Height="181.12" Canvas.Left="1310.31" Canvas.Top="454.438" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_27" Width="55.132" Height="55.132" Canvas.Left="1104" Canvas.Top="712.868" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="41.1"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_28" Width="41.054" Height="41.054" Canvas.Left="1690.22" Canvas.Top="278.661" Stretch="Fill" Fill="#1200ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="23.4"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_29" Width="16.734" Height="16.734" Canvas.Left="1056.33" Canvas.Top="972.727" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="15"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_30" Width="16.217" Height="16.217" Canvas.Left="1149.66" Canvas.Top="984.913" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="16"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_31" Width="16.217" Height="16.217" Canvas.Left="1143.89" Canvas.Top="895.783" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="16"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_32" Width="20.238" Height="20.238" Canvas.Left="1237.79" Canvas.Top="781.816" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="22"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_33" Width="16.217" Height="16.217" Canvas.Left="1039.78" Canvas.Top="807.891" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="8.31495"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_34" Width="16.217" Height="16.217" Canvas.Left="1063.78" Canvas.Top="1047.89" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="18.5197"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_35" Width="10.095" Height="10.095" Canvas.Left="1052.31" Canvas.Top="938.912" Stretch="Fill" Fill="#2C00C4FF">
    <Ellipse.Effect>
        <BlurEffect Radius="9.4"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_36" Width="2.861" Height="2.861" Canvas.Left="1035.37" Canvas.Top="914.859" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="3.40158"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_37" Width="2.861" Height="2.861" Canvas.Left="1003.46" Canvas.Top="934.026" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9.4"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_38" Width="31.241" Height="31.241" Canvas.Left="872.549" Canvas.Top="409.266" Stretch="Fill" Fill="#3400267C">
    <Ellipse.Effect>
        <BlurEffect Radius="37.7953"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_39" Width="31.241" Height="31.241" Canvas.Left="1660.24" Canvas.Top="618.972" Stretch="Fill" Fill="#5500267C" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="37.7953"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_40" Width="16.217" Height="16.217" Canvas.Left="1071.89" Canvas.Top="960" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="16"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_41" Width="16.217" Height="16.217" Canvas.Left="1000.23" Canvas.Top="999.847" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="22.3"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_42" Width="2.861" Height="2.861" Canvas.Left="814.572" Canvas.Top="1019.87" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_43" Width="16.217" Height="16.217" Canvas.Left="1231.78" Canvas.Top="807.891" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="16"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_44" Width="2.861" Height="2.861" Canvas.Left="867.332" Canvas.Top="1030.57" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_45" Width="2.861" Height="2.861" Canvas.Left="895.082" Canvas.Top="1046.94" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_46" Width="2.861" Height="2.861" Canvas.Left="836.332" Canvas.Top="1056.86" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_47" Width="2.861" Height="2.861" Canvas.Left="841.666" Canvas.Top="1005.86" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_48" Width="2.861" Height="2.861" Canvas.Left="1064.26" Canvas.Top="993.488" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9.4"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_49" Width="2.861" Height="2.861" Canvas.Left="1092.01" Canvas.Top="1009.86" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9.4"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_50" Width="2.861" Height="2.861" Canvas.Left="1005.13" Canvas.Top="1051.67" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9.4"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_51" Width="2.861" Height="2.861" Canvas.Left="1038.59" Canvas.Top="968.78" Stretch="Fill" Fill="#F700C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="9.4"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_52" Width="60.533" Height="60.533" Canvas.Left="617.5" Canvas.Top="1049.5" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_53" Width="20.238" Height="20.238" Canvas.Left="925.5" Canvas.Top="973.61" Stretch="Fill" Fill="#2C00C4FF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="22.3"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_54" Width="55.022" Height="55.021" Canvas.Left="328.978" Canvas.Top="16.979" Stretch="Fill" Fill="#3400A9FF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Path x:Name="Path_55" Width="40" Height="40" Canvas.Left="1492.02" Canvas.Top="123.99" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="100"/>
    </Path.Effect>
</Path>
<Path x:Name="Path_56" Width="40" Height="40" Canvas.Left="1516.12" Canvas.Top="267.934" Stretch="Fill" Fill="#3400ADFF" Data=" ">
    <Path.Effect>
        <BlurEffect Radius="100"/>
    </Path.Effect>
</Path>
<Ellipse x:Name="Ellipse_57" Width="66.436" Height="66.436" Canvas.Left="126.914" Canvas.Top="397.434" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="72.2"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_58" Width="96" Height="96" Canvas.Left="527.999" Canvas.Top="960.001" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>
<Ellipse x:Name="Ellipse_59" Width="96" Height="96" Canvas.Left="1151.74" Canvas.Top="240.175" Stretch="Fill" Fill="#3400ADFF">
    <Ellipse.Effect>
        <BlurEffect Radius="100"/>
    </Ellipse.Effect>
</Ellipse>

Answer 1

这很可能是由于BlurEffect s（大约在每条路径上）都有很多。这些转换为在显卡上执行的着色器 - 并且拥有大量的着色器将需要相当不错的显卡才能获得良好的性能。

通过设置（外部）Canvas，可以将其完全排除为性能问题。CacheMode：

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
     xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d" x:Name="Main_menu" Width="1920" Height="1080" 
    Clip="F1 M 0,0L 1920,0L 1920,1080L 0,1080L 0,0">

  <!-- Set cache mode -->
  <Canvas.CacheMode>
      <BitmapCache EnableClearType="False" RenderAtScale="2" />
  </Canvas.CacheMode>

    <Canvas x:Name="Layer_10" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="0">
       ....

Answer 2

将您的Ellipse对象转换为Path对象，在Blend中，您可以通过右键单击对象来执行此操作 - ＆gt;路径 - ＆gt;转换为路径

椭圆非常慢，因为它们使用sin和cos来计算......