开发者

A basic WPF performance question

开发者 https://www.devze.com 2023-02-17 05:29 出处:网络
I\'m a designer and I need to understand why does the application I created in Expression Blend run so slow. Experiments show that the background with lots of elements contributes the most to the issu

I'm a designer and I need to understand why does the application I created in Expression Blend run so slow. Experiments show that the background with lots of elements contributes the most to the issue. I know there is a lot of discussions and articles on optimizing performance in WPF, but for someone who doesn't understand the code behind, they are useless. I wondered if someone could look at the XAML code of the background generated in Blend and tell me what is completely wrong there. We think that the background must be in vector, since the user may scale the application window. Or maybe there is a way to use a bitmap for the background, which would scale without losing in quality and performance?

There were long sequences of symbols in the code in the Data=" " tags, which i deleted to make it smaller. I don't believe anyone can read them anyway.

Like this, for example: "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"

They are not the cause of the issue. They appeared because I exported the whole thing from Expression Design. When I replaced them with same ellipses created in Blend this tag didn't appear, and it didn't get any better.

So, here is the code. Thank you for trying to help me!

<?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>


This is likely due to having a huge number of BlurEffects (on nearly every path). These translate to shaders that are executed on the graphics card - and having a lot of them will require a fairly decent graphics card to get good perf.

This can probably be eliminated entirely as a performance issue by setting the (outer) 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">
       ....


Transform your Ellipse object to Path object, in Blend you do this by right click on the object --> Path --> Convert to Path

Ellipse are very slow, because they use sin and cos to calculate...

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号