回答編集履歴

見直しキャンペーン中

2023/08/10 09:54

投稿

TN8001

スコア9862

test CHANGED Viewed

@@ -145,6 +145,7 @@
   </Grid>
 </Window>
 ```
+![アプリ動画](https://ddjkaamml8q8x.cloudfront.net/questions/2023-08-10/c6e33db7-f242-44d0-a207-b0dcb9fbf0bb.gif)
 ---

見直しキャンペーン中

2023/07/20 14:46

投稿

TN8001

スコア9862

test CHANGED Viewed

@@ -1,339 +1,168 @@
 表示内容がわからないですが、仮に回答xamlの`GroupBox`「original」のような状態だったとします。
 縦スクロールバーが出るとボタンが左にずれて、見苦しいということですね？
 `StackPanel`の縦方向はサイズが決まりますが、横方向は決まっていません。
 スクロールバーが出て`ScrollViewer`のコンテンツエリアが狭まると、`StackPanel`も横に縮まりボタンも左に移動します。
+「fixed size」のように`StackPanel`のサイズを固定してしまえばこのようにはなりませんが、やりたいのはそういうことではありませんね？（ウィンドウのサイズを変えるとすぐわかります）
+「custom template」の状態が、求めているものであっていますでしょうか（無駄に長いですが、単に`ScrollContentPresenter`をスクロールバーのエリアに、はみ出させるというだけです）
-「fixed size」のように`StackPanel`のサイズを固定してしまえば、このようにはなりません。
-が、やりたいのはそういうことではありませんね？（ウィンドウのサイズを変えるとすぐわかります）
-「custom template」の状態が、求めているものであっていますでしょうか。
-（無駄に長いですが、単に`ScrollContentPresenter`をスクロールバーのエリアに、はみ出させるというだけです）
-```xaml
+```xml
 <Window
   x:Class="Questions242970.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="400"
   Height="600">
   <Window.Resources>
     <Style TargetType="ScrollViewer">
       <Style.Triggers>
         <Trigger Property="IsMouseOver" Value="True">
           <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
           <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
         </Trigger>
         <Trigger Property="IsMouseOver" Value="False">
           <Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
           <Setter Property="VerticalScrollBarVisibility" Value="Hidden" />
         </Trigger>
       </Style.Triggers>
     </Style>
     <!--  Blend for Visual Studio 2019の「テンプレートの編集」で出力されたもの  -->
     <ControlTemplate x:Key="template" TargetType="{x:Type ScrollViewer}">
       <Grid x:Name="Grid" Background="{TemplateBinding Background}">
         <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <Rectangle
           x:Name="Corner"
           Grid.Row="1"
           Grid.Column="1"
           Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
         <!--
           Grid.RowSpan="2"
           Grid.ColumnSpan="2"
           を追加
         -->
         <ScrollContentPresenter
           x:Name="PART_ScrollContentPresenter"
           Grid.Row="0"
           Grid.RowSpan="2"
           Grid.Column="0"
           Grid.ColumnSpan="2"
           Margin="{TemplateBinding Padding}"
           CanContentScroll="{TemplateBinding CanContentScroll}"
           CanHorizontallyScroll="False"
           CanVerticallyScroll="False"
           Content="{TemplateBinding Content}"
           ContentTemplate="{TemplateBinding ContentTemplate}" />
         <ScrollBar
           x:Name="PART_VerticalScrollBar"
           Grid.Row="0"
           Grid.Column="1"
           AutomationProperties.AutomationId="VerticalScrollBar"
           Cursor="Arrow"
           Maximum="{TemplateBinding ScrollableHeight}"
           Minimum="0"
           ViewportSize="{TemplateBinding ViewportHeight}"
           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
           Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
         <ScrollBar
           x:Name="PART_HorizontalScrollBar"
           Grid.Row="1"
           Grid.Column="0"
           AutomationProperties.AutomationId="HorizontalScrollBar"
           Cursor="Arrow"
           Maximum="{TemplateBinding ScrollableWidth}"
           Minimum="0"
           Orientation="Horizontal"
           ViewportSize="{TemplateBinding ViewportWidth}"
           Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
           Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
       </Grid>
     </ControlTemplate>
   </Window.Resources>
   <Grid>
     <Grid.RowDefinitions>
       <RowDefinition />
       <RowDefinition />
       <RowDefinition />
     </Grid.RowDefinitions>
     <GroupBox Header="original">
       <ScrollViewer>
         <StackPanel>
           <Button HorizontalAlignment="Left" Content="Button" />
           <Button HorizontalAlignment="Center" Content="Button" />
           <Button HorizontalAlignment="Right" Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
         </StackPanel>
       </ScrollViewer>
     </GroupBox>
     <GroupBox Grid.Row="1" Header="fixed size">
       <ScrollViewer>
         <StackPanel
           Width="372"
           Height="196"
           HorizontalAlignment="Left"
           VerticalAlignment="Top">
           <Button HorizontalAlignment="Left" Content="Button" />
           <Button HorizontalAlignment="Center" Content="Button" />
           <Button HorizontalAlignment="Right" Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
         </StackPanel>
       </ScrollViewer>
     </GroupBox>
     <GroupBox Grid.Row="2" Header="custom template">
       <ScrollViewer Template="{StaticResource template}">
         <StackPanel>
           <Button HorizontalAlignment="Left" Content="Button" />
           <Button HorizontalAlignment="Center" Content="Button" />
           <Button HorizontalAlignment="Right" Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
           <Button Content="Button" />
         </StackPanel>
       </ScrollViewer>
     </GroupBox>
   </Grid>
 </Window>
 ```
 ---
 もっと手軽に実現するなら、こんなのはどうでしょうか？
-```xaml
+```xml
 <Style TargetType="ScrollBar">
   <Style.Triggers>
     <Trigger Property="IsMouseOver" Value="True">
       <Setter Property="Opacity" Value="1" />
     </Trigger>
     <Trigger Property="IsMouseOver" Value="False">
       <Setter Property="Opacity" Value="0" />
     </Trigger>
   </Style.Triggers>
 </Style>
 ```
 上には被さらずに隙間ができてしまうのが難点ですが。
 ---
 わたしもUWPのような「マウスが乗っていないときは細くなるスクロールバー」を作る際、苦労しました^^;

Resourcesの定義場所でコントロール可能でした

2020/02/22 23:09

投稿

TN8001

スコア9862

test CHANGED Viewed

@@ -328,7 +328,7 @@
 ```
-すべてのスクロールバーに影響してしまうのと、上には被さらずに隙間ができてしまうのが難点ですが。
+上には被さらずに隙間ができてしまうのが難点ですが。