WPF调整大小问题 [英] Wpf Resizing Problem

问题描述

你好，我有一个窗口 [ ^ ]由3个DockPanel(包含在另一个DockPanel中)排列的StackPanel(带有背景图像)组成.有时，如果我调整窗口的大小(在Visual Studio中)，然后编译并运行，它看起来有点错误，例如 [ ^ ].为什么会这样呢?我该怎么解决?

Hello, I have a window [^] made up of StackPanels(with background images) arranged in 3 DockPanels(which are contained by another DockPanel). Sometimes if I resize the window(in Visual Studio) and then compile it and run, it looks a bit wrong like this[^]. Why is this happening? How can I solve it?

<Grid>
        <DockPanel LastChildFill="True" HorizontalAlignment="Stretch" Height="Auto">
            <DockPanel Height="31" DockPanel.Dock="Top" VerticalAlignment="Top">
                <StackPanel Height="31" HorizontalAlignment="Left" Name="CornerUpLeft" VerticalAlignment="Top" Width="31" Orientation="Vertical">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloCorner.png" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
                <StackPanel Height="31" HorizontalAlignment="Right" Name="CornerUpRight" VerticalAlignment="Top" Width="31" DockPanel.Dock="Right" Margin="0">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloXCorner.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
                <StackPanel Height="32" Margin="0" Name="XUp" VerticalAlignment="Top" Width="Auto" DockPanel.Dock="Top">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloX.png" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
            </DockPanel>
            <DockPanel Name="Bottom" Height="31" Width="Auto" DockPanel.Dock="Bottom" VerticalAlignment="Bottom" LastChildFill="True">
                <StackPanel Height="31" HorizontalAlignment="Left" Margin="0" Name="CornerDownLeft" VerticalAlignment="Center" Width="31">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloYCorner.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
                <StackPanel Height="31" Margin="0,0,31,0" Name="XDown" VerticalAlignment="Center" DockPanel.Dock="Bottom" Width="Auto">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloXF.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
                <StackPanel Height="31" HorizontalAlignment="Right" Margin="0,0,0,-31" Name="CornerDownRight" VerticalAlignment="Bottom" Width="31" DockPanel.Dock="Bottom">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloXYCorner.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
            </DockPanel>
            <DockPanel Height="Auto" Name="dockPanel1" Width="Auto" DockPanel.Dock="Top" LastChildFill="True">
                <StackPanel HorizontalAlignment="Left" Margin="0" Name="YLeft" VerticalAlignment="Stretch" Width="31" Orientation="Vertical" DockPanel.Dock="Left">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloY.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
                <StackPanel Height="Auto" Name="YRight" Width="31" HorizontalAlignment="Right" Orientation="Horizontal" DockPanel.Dock="Right">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloYF.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
                <StackPanel Name="Fill" DockPanel.Dock="Top">
                    <StackPanel.Background>
                        <ImageBrush ImageSource="/Hologram;component/Images/HoloFill.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,31,31" ViewportUnits="Absolute" />
                    </StackPanel.Background>
                </StackPanel>
            </DockPanel>
        </DockPanel>
        <Image Name="Close" Stretch="Fill" HorizontalAlignment="Right" VerticalAlignment="Top" Width="34" Height="32" Source="/Hologram;component/Images/HoloButtonXD.png" Margin="0,0,18,0" />
    <Image Height="20" Name="Minimize" Stretch="Fill" Width="28" HorizontalAlignment="Right" VerticalAlignment="Top" Source="/Hologram;component/Images/HoloButtonMinD.png" StretchDirection="Both" Margin="0,13,52,0" />
    </Grid>

推荐答案

无论是WPF，Winforms，Swing还是其他工具，都永远不要相信设计器.
没有看到您的xaml，很难说出问题所在.因此，我能做的最好就是尝试设置SnapsToDevicePixels="True"

感谢您的回答，但仍无法正确显示.还有其他建议吗?
是的，很抱歉，如果我现在似乎有些苛刻，但似乎苛刻的建议通常非常有用:)
重写XAML，这是实现所需简单效果的复杂方法.
1)不要使用StackPanel来显示图像的布局Panel，就像用来布局UI元素一样.
2)使用Grid宽度3列3行来制作效果，其他人可以很容易地看到您在做什么.
3)我今天心情很宽裕，这就是我要怎么做，最后两张图片我不太了解它的适合程度，所以我把它们留在了哪里.

Never ever trust in the designer whether it''s for WPF, Winforms, Swing or whatever.
Without seeing your xaml it''s difficult to say what is wrong. So the best I can do is try setting SnapsToDevicePixels="True"

Thanks for the answer but is still doesn''t display properly. Any other suggestions?
Yes and sorry if seem I a bit harsh now, but advice that seem harsh is mostly very useful :)
Rewrite your XAML it''s just way to complex for the simple effect you want.
1) Don''t use StackPanel as a means to display an image it''s a layout Panel, as in used to layout UI elements.
2) Use a Grid width 3 columns and 3 rows to make your effect, it''s simply and very easy for others to see what you''re doing.
3) I''m in a generous mood today, so here is how I would do it, the last two images I don''t really understand how fit in so I''ve left them as they where.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="31"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="31"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="31"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="31"/>
    </Grid.RowDefinitions>

    <Image Source="/Hologram;component/Images/HoloCorner.png"/>
    <Image Source="/Hologram;component/Images/HoloX.png" Grid.Column="1"/>
    <Image Source="/Hologram;component/Images/HoloXCorner.png" Grid.Column="2"/>

    <Image Source="/Hologram;component/Images/HoloY.png" Grid.Row="1"/>
    <Image Source="/Hologram;component/Images/HoloFill.png" Grid.Column="1" Grid.Row="1"/>
    <Image Source="/Hologram;component/Images/HoloYF.png" Grid.Column="2" Grid.Row="1"/>

    <Image Source="/Hologram;component/Images/HoloYCorner.png" Grid.Row="2"/>
    <Image Source="/Hologram;component/Images/HoloXF.png" Grid.Column="1" Grid.Row="2"/>
    <Image Source="/Hologram;component/Images/HoloXYCorner.png" Grid.Column="2"

           Grid.Row="2"/>

    <Image Name="Close" Stretch="Fill" HorizontalAlignment="Right" VerticalAlignment="Top"

           Width="34" Height="32" Source="/Hologram;component/Images/HoloButtonXD.png" 

           Margin="0,0,18,0" />
    <Image Height="20" Name="Minimize" Stretch="Fill" Width="28"

           HorizontalAlignment="Right" VerticalAlignment="Top"

           Source="/Hologram;component/Images/HoloButtonMinD.png" StretchDirection="Both"

           Margin="0,13,52,0" />

</Grid>

This might very well solve your problem, but no garentees. make the change and then if you''re still having problems, then lets take it from there :D

Just updated the XAML I had messed up Grid.Row on some of the elements :^)

This might very well solve your problem, but no garentees. make the change and then if you''re still having problems, then lets take it from there :D

Just updated the XAML I had messed up Grid.Row on some of the elements :^)

这篇关于WPF调整大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！