給控制元件新增陰影效果SystemDropShadowChrome

灰色小五發表於2024-10-10
控制元件Chrome

引入名稱空間

xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"

給控制元件新增引用，這個效能比較好。

例如給Combobox下拉框新增引用效果

<--! 其他程式碼-->
  <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
                <theme:SystemDropShadowChrome x:Name="shadow"
                                              Color="Transparent"
                                              RenderTransformOrigin ="5,5"
                                              CornerRadius="4"
                                              MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
                                              MaxHeight="{TemplateBinding MaxDropDownHeight}">
<--!      Margin="10,10,0,0" 這個是重點，顯示左邊和上邊的陰影,預設左下角就有陰影-->
                    <Border x:Name="dropDownBorder"  
                            Margin="10,10,0,0"
                             CornerRadius="4"
                            Padding="10"
                            Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                            BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"  >
                      
                        <ScrollViewer x:Name="DropDownScrollViewer">
                            <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                    <Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/>
                                </Canvas>
                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Grid>
                        </ScrollViewer>
                    </Border>
                </theme:SystemDropShadowChrome>
            </Popup>
<--! 其他程式碼-->

效果如下：

陰影樣式二

Margin="8,8,-2,-2" 這個是重點 控制陰影，顯示左邊和上邊的陰影，調整左下角的陰影。
<--! 其他程式碼-->
  <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
                <theme:SystemDropShadowChrome x:Name="shadow"
                                              Color="Transparent"
                                              RenderTransformOrigin ="5,5"
                                              CornerRadius="4"
                                              MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
                                              MaxHeight="{TemplateBinding MaxDropDownHeight}">
<--!       Margin="8,8,-2,-2" 這個是重點 控制陰影，顯示左邊和上邊的陰影，調整左下角的陰影-->
                    <Border x:Name="dropDownBorder"  
                              Margin="8,8,-2,-2"
                             CornerRadius="4"
                            Padding="10"
                            Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
                            BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"  >
                      
                        <ScrollViewer x:Name="DropDownScrollViewer">
                            <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                    <Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/>
                                </Canvas>
                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Grid>
                        </ScrollViewer>
                    </Border>
                </theme:SystemDropShadowChrome>
            </Popup>
<--! 其他程式碼-->

相關文章