Center a TextBox over the top of a ScrollViewer in WPF.

Question

I have a MainView that contains a navigation bar which selects one of many XAML pages to be displayed in the page view pane. The MainView contains a ScrollViewer around the pages. This allows the pages to be whatever size they need to be and the MainView's ScrollViewer scrolls them. This all works great.

On one of the pages, I need to (sometimes) center a TextBox in the middle of the page view pane (over the top of the page content). This was easily done by placing both the page content and the TextBox overlapping each other in a Grid (and I hide the TextBox as necessary). This all seems to work great.

However, if the page content grows to be larger than the pane, the TextBox is centered not on the pane, but on the full page content. Thus, it moves from center screen down and/or to the right (and eventually off the screen). Bummer.

Options:

1. Remove the ScrollViewer from the MainView. This would require placing one on every page! Argh.

2. Do option #1, and create a ScrolledPage base class. This is a lot of work, and I'm worried about tools issues (Blend issues). It also requires changing every page (to subclass this page).

3. Somehow override the ScrollViewer on just this page. Then, place another ScrollViewer on the page content to Scroll it.

Option 3 seems preferable, because it contains the issue to just modifying this page (instead of changing the rest of the pages). However, I can't figure out how to do it. Ideas?

Thanks in advance!

Eric

Answer 1

Hi there,

why not put that TextBox into a Grid together with the ScrollViewer?

Like

<Grid>
  <TextBox 
    Text="{Binding Path=MyText}" 
    Visibility="{Binding SomeProperty}" 
    HorizontalAlignment="Center" 
    VerticalAlignment="Center" />
  <ScrollViewer />
</Grid>

Cheers, Alex