代码之家 › 专栏 › 技术社区 › SparkyNZ

Windows UWP ScrollViewer滚动条与内容重叠

winrt-xaml uwp xaml

0

SparkyNZ · 技术社区 · 5 年前

如何阻止ScrollViewer的滚动条与这样的内容重叠?

我有一个包含文本的RichTextBlock,无论RichTextBlock有多宽,或者如何更改边距和填充值,我都无法让滚动条进一步向右移动以阻止这种重叠的发生。我正在运行Windows 10,它被配置为隐藏滚动条,直到鼠标指针悬停在滚动条上。

下面是我的应用程序的XAML。

<Page
    x:Class="PaulWinPOS1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PaulWinPOS1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Margin="0,26,0,0">
        <Button x:Name="butConnect" Content="Connect" Margin="0,38,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Click="ButConnect_Click" Width="92"/>
        <Button x:Name="butLogin" Content="Login" Margin="0,92,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Width="92" IsEnabled="False" Click="ButLogin_Click"/>
        <Button x:Name="butAdd" Content="Add Item" Margin="0,143,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Width="92" IsEnabled="False" Click="ButAdd_Click"/>

        <ScrollViewer x:Name="scrollViewerWeb" 
            HorizontalScrollBarVisibility="Auto"
            VerticalScrollBarVisibility="Auto" 
            HorizontalAlignment="Left"
            Width="350"
            Padding="16,0"
            Grid.RowSpan="10"
            FontFamily="Segoe UI" RequestedTheme="Dark" ZoomMode="Enabled" 
            Margin="669,304,0,0" >
            <WebView x:Name="webviewReceipt" 
                Margin="10,10,50,10"
                HorizontalAlignment="Left" 
                Height="333" Width="300"
                VerticalAlignment="Top"
                ScrollViewer.VerticalScrollMode="Enabled"
                ScrollViewer.VerticalScrollBarVisibility="Visible" />
        </ScrollViewer>
        
        <Button x:Name="butDisconnect" Content="Disconnect" Margin="0,244,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Width="92" Click="ButDisconnect_Click"/>


    </Grid>
</Page>

0 回复 | 直到 5 年前

1

2

Richard Zhang 5 年前

WebView的滚动条是特殊的,无法通过传统的ScrollViewer附加属性解决,但WebView的滚动条可以通过网页的CSS禁用。

body {
   -ms-overflow-style: none;
}

如果无法修改网页的源代码,则可以在加载WebView内容后执行以下操作:

private async void webviewReceipt_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
    string js = "var style = document.createElement('style');" +
               "style.type = 'text/css';" +
               "style.innerHTML = \"body{ -ms-overflow-style: none !important; }\";" +
               "document.getElementsByTagName('Head').item(0).appendChild(style); ";
    await webviewReceipt.InvokeScriptAsync("eval", new string[] { js });
}

使现代化

如果我们需要显示滚动条,我们可以添加 padding-right 以使滚动条不会阻止内容。

private async void webviewReceipt_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
    string js = "var style = document.createElement('style');" +
               "style.type = 'text/css';" +
               "style.innerHTML = \"body{ padding-right: 24px; }\";" +
               "document.getElementsByTagName('Head').item(0).appendChild(style); ";
    await webviewReceipt.InvokeScriptAsync("eval", new string[] { js });
}

2

0

Vincent 5 年前

你需要添加一个 Padding 到 ScrollViewer .

<ScrollViewer Padding="18, 0">
    <RichTextBlock />
</ScrollViewer>

通常是 ScrollBar 宽度是18。

3

0

user13387451 user13387451 5 年前

看起来您在web视图和滚动查看器上都启用了滚动条。您可以尝试禁用其中一个屏幕上的滚动条,看看这是否会产生影响。