WPFのテキストブロックの文字を縦方向にスクロールさせたい

Question

###前提・実現したいこと
お世話になります。

現在、Windows WPFにてデスクトップアプリを作成しています。

Windowに配置したテキストブロックに、動的にログを表示させ、

文字を縦方向にスクロールさせる方法

をご存知の方がいらっしゃいましたら、教えていただけますでしょうか？

＊なお、テキストボックスでなく、テキストブロックにした理由は、
ログの種類によって文字色を動的に変更したいためです。

よろしくお願いいたします。

###発生している問題・エラーメッセージ
テキストボックスのように文字を縦方向にスクロールさせたいのですが、
テキストボックスにあるスクロール関連のプロパティと同様のものが
テキストブロックには見当たりません。

###実際のCode

    <ScrollViewer x:Name ="LogTextScroll" VerticalScrollBarVisibility="Auto">
        <Grid Height="110" Width="600">
            <TextBlock x:Name="TextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="100" Width="600" />
        </Grid>
    </ScrollViewer>
    <Label x:Name="label" Content="Log" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,-28,0,0" Width="102"/>
    <Button Content="Clear" x:Name="ClearLogButton"  VerticalAlignment="Top" HorizontalAlignment="Left" Height="24" Width="48" Margin="107,-26,0,0" Click="ClearLogButton_Click"/>
    <Button Content="UL" x:Name="LockLogButton"  VerticalAlignment="Top" HorizontalAlignment="Left" Height="24" Width="30" Margin="160,-26,0,0" Click="LockLogButton_Click"/>
</Grid>```

###試したこと
ぐぐったところScrollViewerタグで囲むがヒットし試してみたのですが、
「テキストブロック自体」スクロールすることになります。
＊テキストブロック画面外の最終行が表示されません。

###補足情報(言語/FW/ツール等のバージョンなど)
VisualStudio2015 Enterprise

よろしくお願いいたします。

Answer 1

確かにサンプルソースだとスクロールしませんでした。
以下のように修正すると、私の環境では動きました。どうでしょうか？

<Grid Background="#FFE5E5E5" Height="100" Width="600" >

    <!-- ★ScrollViewer 直下の Grid は不要。（ScrollViewerは直接TextBlockを包む） -->
    <!-- ★Grid に指定していた Height, Width は ScrollViewer に指定する -->
    <ScrollViewer x:Name ="LogTextScroll" Height="110" Width="600" VerticalScrollBarVisibility="Auto">
        <!-- ★TextBlock には Height, Width は指定しない -->
        <TextBlock x:Name="TextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />
    </ScrollViewer>

    <Label x:Name="label" Content="Log" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,-28,0,0" Width="102"/>
    <Button Content="Clear" x:Name="ClearLogButton"  VerticalAlignment="Top" HorizontalAlignment="Left" Height="24" Width="48" Margin="107,-26,0,0" />
    <Button Content="UL" x:Name="LockLogButton"  VerticalAlignment="Top" HorizontalAlignment="Left" Height="24" Width="30" Margin="160,-26,0,0" />
</Grid>

【追記】
あ、ボタンのクリックイベントなどはエラーが出るので消してしまっています。
Grid - ScrollViewer - TextBlock の部分はコメントを書いた部分しか変えていないので、コピペでいけると思います。

Comments

[necos]

ご確認ありがとうございます。
いただいたコードを試したところ、こちらでも表示されました。

丁寧に説明していただき、大変助かりました。
今回はこれで解決とさせていただきます。

ありがとうございました。

Answer 2

質問のソースのどこが問題なのか誰も回答していませんでしたので書いておきます

    <ScrollViewer x:Name ="LogTextScroll" VerticalScrollBarVisibility="Auto">
        <Grid Height="110" Width="600">
            <TextBlock x:Name="TextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="100" Width="600" />
        </Grid>
    </ScrollViewer>

上記が質問のソースの肝心な部分を抜粋したものですが、ScrollViewerの直下にGridを配置して、その中にTextBlockを配置しています。
それだけなら特に問題はなかったのですが、Gridの方でサイズを指定してあり、そのせいでGridの表示範囲でTextBlockの表示領域が削られてしまっており、ScrollViewerでGridをスクロールしてもTextBlockのGridからはみ出たエリアが表示されないという状態になっています

他方のの回答だと直にTextBlockで囲むように書いてありますので複数の項目を囲んだGridをスクロールさせたい場合に解決しないような内容になっています

で、どうすればいいのかというと、単純にスクロールしたい中身(質問のソースの場合はScrollViewerの直下にあるGridのこと)には高さの指定を記述しないだけでよくなります

    <ScrollViewer x:Name ="LogTextScroll" VerticalScrollBarVisibility="Auto">
        <Grid Width="600">
            <TextBlock x:Name="TextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="100" Width="600" />
        </Grid>
    </ScrollViewer>

もちろん、TextBlockだけしかスクロールさせたくない場合は他の方の回答の通り、Gridを入れずに直でTextBlockをScrollViewerで囲み、TextBlockの高さ指定を行わないことで実現できます

Answer 3

昔 WPF をやっていた時の自分用メモには 「スクロールさせる場合は ScrollViewer で囲む」とありますね。

<ScrollViewer Height="50" Width="200" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
    <TextBlock Text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#13;bbb&#13;ccc&#13;ddd&#13;eee&#13;fff&#13;ggg" />
</ScrollViewer>

どうでしょうか。

---

【追記】
すみません、見落としてました。ScrollViewer 試されたんですね。
でも上記のコードを試してみましたが、私の環境では問題なく最終行まで表示されます。
何が違うんでしょうね…？

---

【さらに追記】
最終行が出ないってもしかしてスクロールバーが出ないということでしょうか。違ったらすみません。

<!-- ScrollViewer の親が StackPanel：スクロールしない？ -->
<StackPanel Height="50" Width="200">

    <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
        <TextBlock Text="aaa&#13;bbb&#13;ccc&#13;ddd&#13;eee&#13;fff&#13;ggg" Foreground="Blue" />
    </ScrollViewer>

</StackPanel>

<!--  ScrollViewer の親が Grid：スクロールする -->
<Grid Height="50" Width="200">

    <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
        <TextBlock Text="aaa&#13;bbb&#13;ccc&#13;ddd&#13;eee&#13;fff&#13;ggg" Foreground="Purple" />
    </ScrollViewer>

</Grid>

Comments

[necos]

回答ありがとうございました。
内容確認し、後ほど返信させていただきます。

[necos]

返信遅くなりまして申し訳ありません。
改めまして、回答ありがとうございます。

拝見したところ、静的に文字を追加した際のコードをいただいたようですね。

そちらは試しておりませんでしたが、今回は以下の様な方法で、動的に文字を追加しております。

var run = new Run
{
Text = "Log"
};

run.Foreground = new SolidColorBrush(Colors.Red);
(＊条件分岐で色分け　run.Foreground = new SolidColorBrush(Colors.Black);)

TextBlock.Inlines.Add(run);
TextBlock.Inlines.Add(new LineBreak());

こちらの方の知見があるようでしたら、ご教示いただけますと幸いです。
よろしくお願い致します。

[sk_3122]

実際に試してみて、駄目だったのでしょうか？
静的文字列にしたのは単にサンプルとしてシンプルにしただけで、
コード側から突っ込んでも変わらないと思うのですが…
（私の環境では別に問題ないように見えます）

もしうまくいかないのであれば、質問内容に実際に自分が試したコード（XAMLも）を追加した方が良いかと思います。

[necos]

回答ありがとうございます。
>実際に試してみて、駄目だったのでしょうか？
実際に試して見たのですが、静的文字列だとうまく表示されました

>もしうまくいかないのであれば、質問内容に実際に自分が試したコード（XAMLも）を追加した方が良いかと思います。

追加させていただきました。

もし何か分かるようでしたら、よろしくお願いします。