将滚动条从禁用更改为自动更改内容显示 [英] Changing Scroll Bar from Disabled to Auto changes contents display

问题描述

当我将滚动条可见性从禁用更改为自动时，背景图像会停止调整大小（UniformToFill）并保持实际图像大小。理想情况下，滚动条只会以800x600的分辨率出现，但如果滚动
条可以在不影响其余内容的情况下工作，我会很高兴。滚动条设置为禁用时，内容显示正常。

When I change scroll bar visibility from Disabled to Auto the background image stops resizing to maximum (UniformToFill) and stays at the actual image size. Ideally the scrollbars will only appear at a resolution of 800x600, but I'd be happy if the scroll bars would work without affecting the rest of the contents. The contents display fine with scrollbars set to disabled.

    xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns：x =" http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns：d =" http://schemas.microsoft.com/expression/blend/2008"

    xmlns：mc =" http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc：Ignorable =" d"

    d：Designwidth = QUOT; 800" d：Designheight = QUOT; 600" Horizo​​ntalContentAlignment = QUOT;拉伸" VerticalContentAlignment =" Stretch"> b


    < ScrollViewer x：Name =" LayoutRoot"背景= QUOT;＃FF0B0D1C" Horizo​​ntalContentAlignment = QUOT;拉伸" VerticalContentAlignment = QUOT;拉伸"填充= QUOT; 0" BorderBrush = QUOT; {X：空}" ScrollViewer.VerticalScrollBarVisibility = QUOT;禁用" >

    &NBSP;&NBSP;&NBSP; < Grid x：Name =" Grid" MinWidth = QUOT; 800"了minHeight = QUOT; 600" >

    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Image x：Name =" MoonlitSky"余量= QUOT; 0" Source =" Drowblade_Images / Layer 0.png"伸展= QUOT; UniformToFill"的Horizo​​ntalAlignment = QUOT;中心" VerticalAlignment = QUOT;中心"&NBSP; MinWidth = QUOT; 800"了minHeight = QUOT; 600" Width =" {Binding
MaxWidth，ElementName = MoonlitSky}"高度="{Binding MaxHeight，ElementName = MoonlitSky}" />
$
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < TextBlock x：Name =" Title"前景= QUOT;＃FFF4EDE6" fontWeight设置= QUOT;粗体" FontStyle = QUOT;斜体"字号= QUOT; 72"的FontFamily = QUOT; / Drowblade;组件/字体/ Fonts.zip＃哈氏"高度= QUOT; 251" LineStackingStrategy = QUOT; BlockLineHeight"
LineHeight =" 72" TextAlignment = QUOT;左" TextWrapping = QUOT;包覆与QUOT;文本= QUOT; Drowblade&安培; #xa;设计和QUOT;宽度= QUOT; 500"的Horizo​​ntalAlignment = QUOT;左"余量= QUOT; 50,50,0,0" VerticalAlignment =" Top" />

    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Image x：Name =" Raven"的Horizo​​ntalAlignment = QUOT;中心" Source =" Drowblade_Images / Layer 1.png"伸展= QUOT; UniformToFill" VerticalAlignment = QUOT;中心"宽度= QUOT; 200"高度= QUOT; 200" />
$
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Grid x：Name =" MenuBar"的Horizo​​ntalAlignment = QUOT;左"余量= QUOT; 0" MinWidth = QUOT; 800"了minHeight = QUOT; 200" VerticalAlignment = QUOT;底座"宽度= QUOT; 800"高度="250">

    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < TextBlock x：Name =" MenuItems"前景= QUOT;＃FFEDE9D3" fontWeight设置= QUOT;粗体" FontStyle = QUOT;斜体"字号= QUOT; 30英寸;的FontFamily = QUOT; / Drowblade;组件/字体/ Fonts.zip＃哈氏"高度= QUOT; 61" LineStackingStrategy = QUOT; BlockLineHeight"
LineHeight =" 30" TextAlignment = QUOT;左" TextWrapping = QUOT;包覆与QUOT; Text =" Portfolio Contact Scale Clients Terms"余量= QUOT; 200,0,0,50" VerticalAlignment = QUOT;底座" Horizo​​ntalAlignment =" Left" />

    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Image x：Name =" Pentacle"的Horizo​​ntalAlignment = QUOT;左"高度= QUOT; 100" Source =" Pentacle_Images / Layer 0.png"伸展= QUOT;填写" VerticalAlignment = QUOT;底座"宽度= QUOT; 100"余量= QUOT; 50,0,0,50" d：LayoutOverrides =" Horizo​​ntalAlignment" />

    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < / Grid>

    &NBSP;&NBSP;&NBSP; < / Grid>

    < / ScrollViewer>

< / UserControl>

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:Designwidth="800" d:Designheight="600" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

    <ScrollViewer x:Name="LayoutRoot" Background="#FF0B0D1C" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" BorderBrush="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
        <Grid x:Name="Grid" MinWidth="800" MinHeight="600" >
            <Image x:Name="MoonlitSky" Margin="0" Source="Drowblade_Images/Layer 0.png" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center"  MinWidth="800" MinHeight="600" Width="{Binding MaxWidth, ElementName=MoonlitSky}" Height="{Binding MaxHeight, ElementName=MoonlitSky}" />
            <TextBlock x:Name="Title" Foreground="#FFF4EDE6" FontWeight="Bold" FontStyle="Italic" FontSize="72" FontFamily="/Drowblade;component/Fonts/Fonts.zip#Harrington" Height="251" LineStackingStrategy="BlockLineHeight" LineHeight="72" TextAlignment="Left" TextWrapping="Wrap" Text="Drowblade&#xa;Design" Width="500" HorizontalAlignment="Left" Margin="50,50,0,0" VerticalAlignment="Top"/>
            <Image x:Name="Raven" HorizontalAlignment="Center" Source="Drowblade_Images/Layer 1.png" Stretch="UniformToFill" VerticalAlignment="Center" Width="200" Height="200" />
            <Grid x:Name="MenuBar" HorizontalAlignment="Left" Margin="0" MinWidth="800" MinHeight="200" VerticalAlignment="Bottom" Width="800" Height="250">
                <TextBlock x:Name="MenuItems" Foreground="#FFEDE9D3" FontWeight="Bold" FontStyle="Italic" FontSize="30" FontFamily="/Drowblade;component/Fonts/Fonts.zip#Harrington" Height="61" LineStackingStrategy="BlockLineHeight" LineHeight="30" TextAlignment="Left" TextWrapping="Wrap" Text="Portfolio Contact Scale Clients Terms" Margin="200,0,0,50" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                <Image x:Name="Pentacle" HorizontalAlignment="Left" Height="100" Source="Pentacle_Images/Layer 0.png" Stretch="Fill" VerticalAlignment="Bottom" Width="100" Margin="50,0,0,50" d:LayoutOverrides="HorizontalAlignment"/>
            </Grid>
        </Grid>
    </ScrollViewer>
</UserControl>

推荐答案

如果我将ScrollViewer设置为此，MoonlitSky图像可以很好地扩展。

If I set your ScrollViewer to this, the MoonlitSky image scales up fine.

< ScrollViewer x：Name =" LayoutRoot"背景= QUOT;＃FF0B0D1C" Horizo​​ntalContentAlignment = QUOT;拉伸" VerticalContentAlignment = QUOT;拉伸"填充= QUOT; 0" BorderBrush = QUOT; {X：空}"&NBSP; >

<ScrollViewer x:Name="LayoutRoot" Background="#FF0B0D1C" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" BorderBrush="{x:Null}"  >

对于出现在800x600以上的滚动条，在当前布局中不会发生这种情况，因为Grid的垂直高度为1008像素，因为其中的所有项目都是固定的高度和边距。

As for the scrollbars appearing above 800x600, that's not going to happen in the current layout because your Grid has a vertical height of 1008 pixels because of all the items inside it with a fixed height and margins.

只需提一句建议，您应该考虑使用Canvas进行此类布局，或者在网格中添加行和列以简化布局。你在这里也有很多随机的xaml位（你将图像的高度和宽度限制为
自身？为什么？）。清理它会使设计问题更容易解决。

Just a word of advice, you should really think about either using a Canvas for this type of layout, or adding rows and columns to your grid to simplify your layout. you also have a lot of random xaml bits in here (you bound the height and width of an image to itself? Why?). Cleaning it all up would make troubleshooting design issues much easier.

这篇关于将滚动条从禁用更改为自动更改内容显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！