We Keep Coding

WPF - Columns don't hide properly when GridSplitter is moved

I'm trying to hide a column in a Grid with a GridSplitter when a button is clicked (the button sets the visibility of all items in the third column to collapsed). If I don't move the GridSplitter it works properly and the third column disappear, but if I move the GridSplitter the content disappear but the others columns don't resize to fill the empty space.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="a" Width="*"/>
<ColumnDefinition x:Name="b" Width="3"/>
<ColumnDefinition x:Name="c" Width="Auto" MaxWidth="600"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Background="Green">
<Image Source="te/Dante.png" Height="Auto" Margin="0,128,2,71"/>
</Border>
<Button Grid.Column="0" Grid.Row="0" Width="30" Height="30" Margin="0,10,10,0" HorizontalAlignment="Right" VerticalAlignment="Top" Click="Button_Click"></Button>
<GridSplitter Width="5" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" ResizeDirection="Columns" HorizontalAlignment="Left" Background="White" BorderBrush="Black" BorderThickness="1,0" ResizeBehavior="PreviousAndCurrent"/>
<WrapPanel x:Name="wpC" Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" MinWidth="300" HorizontalAlignment="Stretch" Background="Aqua" Panel.ZIndex="-1"></WrapPanel>
</Grid>
Here is an example of my problem (gif):
How can i solve this problem? Possibly respecting MVVM pattern.

The problem is simple, you set GridSplitter ResizeBehavior="PreviousAndCurrent", but previous grid column width is * and as soon as you move splitter its width units will be changed to absolute (so it will not be able to resize when 3d column width is changed).
Simply set GridSplitter ResizeBehavior="PreviousAndNext" to solve the problem. If you do so the splitter will modify width of 3d column, but shouldn't touch first one anymore.
Btw, instead of using button and click event you can utilize ToggleButton (which IsChecked is bound to Visibility of container with content you want to hide), see this answer. Using converters with pure xaml view is better MVVM than the one with some code behind and x:Name.
Right, you have few layout problems, here is a complete solution:
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Background="Green" />
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
HorizontalAlignment="Right"
VerticalAlignment="Top" />
<Grid Grid.Column="1"
Visibility="{Binding IsChecked, ElementName=toggleButton, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="300"
MinWidth="300"
MaxWidth="600" />
</Grid.ColumnDefinitions>
<GridSplitter Width="5"
ResizeBehavior="CurrentAndNext" />
<WrapPanel Grid.Column="1"
Background="Aqua" />
</Grid>
</Grid>
No need for code-behind, get converter from here.
Point are: 1) put splitter inside hide-able container 2) setup grid columns to have * and fixed width (splitter doesn't work well with auto columns).
Demo:

Dynamically switch control type to show different content types

In my app (windows 8.1) I use the split Visual Studio template. It is working and I can show text content if I choose an item.
The content is mixed with text, images, pdfs.
So how can I dynamically switch the control type (eg TextBlock, Image, UserControl) based an the content data?
If I get text it should displayed in an TextBlock, but if I get an Image (Link) it should displayed in a image control. (Maybe the way to switch the control type is wrong, I don't know!?)
Can I solve this in XAML or should I do it in code behind?
I don't know how can I do this. Can anyone please give me a hint?
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePath}" Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</StackPanel>
<!-- <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}"/> -->
<Image Source="{Binding Content}" Grid.ColumnSpan="2" Grid.Row="2" Margin="0,20,0,0" Stretch="UniformToFill" />

The answer to your question is for you to use DataTemplates to define how each data type should be rendered in the UI. All you need to do is to declare a DataTemplate for each different data type:
<DataTemplate DataType="{x:Type System:String}">
<TextBlock Text="{Binding}">
</DataTemplate>
...
<DataTemplate DataType="{x:Type Custom:DataObject}">
<UserControl DataContext="{Binding}">
</DataTemplate>
If you omit the x:Key references (as in the example above), then the Framework will automatically render the content of the relevant DataTemplate whenever it comes across one of the specified data types. Please see the Data Templating Overview page on MSDN for further details.

Data validation in Silverlight with multiple objects

My Silverlight form requires to input values for fields in objects of 3 classes that together will make the request for the web service to be invoked
Code-in-progress for the GUI is the following
<UserControl x:Class="ClientSanitaro.MainPage"
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:DesignHeight="450" d:DesignWidth="600" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:my="clr-namespace:It.Unina.MasterICT.ClientSanitario.Controls" xmlns:data="clr-namespace:It.Unina.MasterICT.ClientSanitario.Data" Loaded="UserControl_Loaded">
<sdk:TabControl Height="400" HorizontalAlignment="Center" Margin="10,10,0,0" Name="tabControl" VerticalAlignment="Top" Width="550">
<sdk:TabItem Header="Upload documenti" Name="tabUpload">
<sdk:TabItem.DataContext>
<data:PazienteGui/>
</sdk:TabItem.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="sdk:Label">
<Setter Property="Margin" Value="2"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<TextBox Height="23" HorizontalAlignment="Left" Name="txtUploadEndpoint" Width="300" Grid.Column="1" VerticalAlignment="Center" />
<sdk:Label Height="23" HorizontalAlignment="Right" Name="lblUploadEndpoint" VerticalAlignment="Center" Width="80" Content="URL endpoint" Grid.Column="0" />
</Grid>
<Grid Grid.Row="1" Margin="15">
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="3"/>
</Style>
<Style TargetType="sdk:Label">
<Setter Property="Margin" Value="3"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<sdk:Label Content="Persona" FontWeight="Bold" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
<sdk:Label Content="Cognome" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtPersonaCognome" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Nome" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtNome" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Codice Fiscale" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Right" />
<TextBox Name="txtPersonaCodiceFiscale" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Residenza" Grid.Row="4" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtPazienteResidenza" Grid.Row="4" HorizontalAlignment="Stretch" Grid.Column="1"/>
<sdk:Label Content="Struttura Sanitaria" Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" Grid.ColumnSpan="2" FontWeight="Bold" />
<sdk:Label Content="Nome" Grid.Row="6" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtStrutturaNome" Grid.Row="6" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Indirizzo" Grid.Row="7" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtStrutturaIndirizzo" Grid.Row="7" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Documento Sanitario" Grid.Row="0" Grid.Column="2" FontWeight="Bold" HorizontalAlignment="Left" Grid.ColumnSpan="2"/>
<sdk:Label Content="Contenuto" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right"/>
<ComboBox Name="cmbTipoContenuto" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Tipo MIME" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Right"/>
<TextBlock Name="lblMimeType" Grid.Row="2" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
<sdk:Label Content="File" Grid.Row="4" Grid.Column="2" HorizontalAlignment="Right"/>
<my:FileUpload Grid.Column="3" Grid.Row="4" Grid.RowSpan="2" HorizontalAlignment="Stretch" x:Name="fileUpload" VerticalAlignment="Top" FileUploaded="fileUpload_FileUploaded" FileRemoved="fileUpload_FileRemoved" />
<Button Content="Upload" Grid.Column="3" Grid.Row="7" HorizontalAlignment="Stretch" Name="btnUpload" VerticalAlignment="Stretch" Click="btnUpload_Click" />
</Grid>
</Grid>
</sdk:TabItem>
<sdk:TabItem Header="Ricerca documenti" Name="tabRicerca">
<Grid></Grid>
</sdk:TabItem>
</sdk:TabControl>
As you see, in the grid I have several fields, all required (with txtCodiceFiscale being 16 alphanumeric chars long). My Service Reference defines 3 major classes: Persona (person) Documento (Document) and StrutturaSanitaria (HealthFacility). Reading around I found that a "better" way of performing validation is through usage of data binding (which I can easily do in classic WinForms), and perhaps it has something to do with the MVVM pattern which I don't master yet.
I learned that instead of having the form button's Click event validate the code manually the traditional way I can bind the form and its textboxes to properties of a data context object.
The problem
I need 3 data objects. All examples I found so far show only one object assigned to the root control (in my case I need to bind the object to the first TabItem since the second tab is supposed to display results from web service and will be propely bound to). Is it possible to to bind a control to multiple objects? (I don't know the syntax for specifying multiple data objects) If not, can I at least bind it to a class like this and reference each property in the tree?
public class DataContainer {
public Persona Persona{get; set;}
public Documento Documento {get; set;}
public StrutturaSanitaria Struttura {get; set;}
}
It saves me the headache of defining a class that embodies all the values, so at least when I click Submit I have all the objects filled with data.
Or, do you have other viable solutions that are cheap in code? I'm trying to find some books but I don't have the time to read them all before my deadline. Could someone show me a good tutorial on data validation that helps me understand the mechanisms behind it, or just explain them to me concisely?

Colin Eberhardt published a blog post on multiple binding in Silverlight a few years ago. Maybe this can be of some help?
This is basically the same approach that is applied in the WPF MultiBinding class.

Parent control ScrollViewer scrolling instead of child control ScrollViewer

I have this:
<Window x:Class="ScrollTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="450"
Width="525">
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<GroupBox Grid.Row="0"
Header="Stuff"
Height="200">
<TextBlock Text="Lots of controls go here"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</GroupBox>
<TabControl Grid.Row="1">
<TabItem Header="Main Tab">
<TextBox MinHeight="100"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Visible"
AcceptsReturn="True" />
</TabItem>
</TabControl>
</Grid>
</ScrollViewer>
</Window>
When I add too many rows into the TextBox, instead of the ScrollViewer of the TextBox being used, the box stretches and the outermost ScrollViewer is used. Can I prevent that without fixing the height of the TextBox or TabControl?
Update:
If I remove MinHeight on the TextBox and set MaxLines to 5, this is what I get:
If I added a 6th line, the scroll bars of the TextBox's ScrollViewer are used, but they still remain centered vertically in the TextBox control.

I was able to get close with this:
<Window x:Class="ScrollTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="525">
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible"
x:Name="Base">
<Grid Height="{Binding ElementName=Base, Path=ActualHeight, Mode=OneWay}"
MinHeight="400">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<GroupBox Grid.Row="0"
Header="Stuff"
Height="200">
<TextBlock Text="Lots of controls go here"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</GroupBox>
<TabControl Grid.Row="1">
<TabItem Header="Main Tab">
<Grid x:Name="myInnerGrid">
<TextBox MinHeight="100"
MaxHeight="{Binding ElementName=myInnerGrid, Path=ActualHeight, Mode=OneWay}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Visible"
AcceptsReturn="True" />
</Grid>
</TabItem>
</TabControl>
</Grid>
</ScrollViewer>
</Window>
Note the binding expression on height for the outside grid and on MaxHeight for the TextBox.
It's still not perfect in that you have to manually set the MinHeight that will trigger the outer most scrollbar. It's probably as close as WPF will allow without writing a new grid control.
The idea was found here:
http://social.msdn.microsoft.com/Forums/en/wpf/thread/7b4b0c88-6b8f-4f07-aa8b-8e7018762388

Try looking at the MaxLines and MinLines Properties.
From above link:
Setting this property causes the text box to resize if the number of
visible lines exceeds the limit specified by MaxLines. This property
applies only to visible lines, and does not constrain the actual
number of lines. Depending on its configuration, a text box may
contain additional non-visible lines that are accessible by scrolling.
If the Height property is explicitly set on a TextBox, the MaxLines
and MinLines property values are ignored.
Try Changing:
<TextBox MinHeight="100"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
...
to
<TextBox MinLines="5"
MaxLines="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Edit: Give this a try. It is setting the VerticalContentAlignment of the TabItem. This will keep the text box at the top of the Tab, I also set the maxlines to what your available area is able to hold if you resize your form you may want to adjust that number to use all of the available space.
<TabItem Header="Main Tab" VerticalContentAlignment="Top" >
<TextBox
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Visible"
MinLines="8"
MaxLines="8"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
AcceptsReturn="True" />
</TabItem>
Edit:
After looking into it further, the reason the scrollbars are not showing up on the TextBox is because the TabControl and the TabItem are resizing to the size of the TextBox. What needs to be done is to have a limiting height set either on the TabControl, TabItem or TextBox this will allow the ScrollViewer to work for the TextBox.

I found that the best solution to this is to use the Border trick outlined here, applied both vertically and horizontally.
In the following example, a ScrollViewer contains a TextBox, where it is desired to have the TextBox fit all of the available space (vertically and horizontally), and have it scroll vertically before the parent ScrollViewer. The Border PlaceHolderBorder manages the Width of the TextBoxes as the parent window is resized. The Border DescriptionPlaceHolderBorder manages the Height of the Description TextBox as the parent control is resized, and the ScrollViewer of the TextBox kicks in before the parent control.
It is important to have Margins in the placeholder Borders.
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Background="{StaticResource ControlBackgroundBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Style="{DynamicResource LabelHeader}" Content="Company" />
<Label Grid.Row="1" Grid.Column="1" Style="{DynamicResource CompanyNameInput}" Content="{Binding CompanyNameLabel}" />
<Label Grid.Row="2" Grid.Column="1" Style="{DynamicResource DescriptionInput}" Content="{Binding DescriptionLabel}" />
<Border Name="PlaceHolderBorder" Grid.Column="2" Margin="7"/>
<TextBox Grid.Row="1" Grid.Column="2" Text="{Binding CompanyName}" MaxLength="255"/>
<Border Name="DescriptionPlaceHolderBorder" Grid.Row="2" Margin="7"/>
<TextBox Grid.Row="2" Grid.Column="2" Text="{Binding Description}" VerticalScrollBarVisibility="Auto"
TextAlignment="Left" TextWrapping="Wrap" AcceptsReturn="True" MinHeight="60"
Width="{Binding ElementName=PlaceHolderBorder, Path=ActualWidth}"
Height="{Binding ElementName=DescriptionPlaceHolderBorder, Path=ActualHeight}"
/>
<StackPanel Orientation="Horizontal" Grid.Row="3" Grid.Column="2" Margin="5">
<Button Command="{Binding UpdateCommand}" Content="{Binding UpdateButtonLabel}"></Button>
<Button Command="{Binding ResetCommand}" Content="{Binding ResetButtonLabel}"></Button>
<Button Command="{Binding CloseConfirmCommand}" Content="{Binding CloseButtonLabel}"></Button>
</StackPanel>
</Grid>
</ScrollViewer>

ListView scrollbar messes up my layout

I have a WPF ListBox that typically shows 4 or 5 items. For my application that means I almost never have to display a scrollbar (there is enough space).
However, in case there are more items in the list, I need to show the vertical scroll bar, but as a result my content has less space and doesn't look nice anymore on a "backdrop" I've created behind the listbox.
I like to "reserve" room in my layout for the scrollbar to appear. Is there a way to do that? (maybe having the scrollbar overlayed on the content)

What about wrapping it with a ScrollViewr?
<ScrollViewer VerticalScrollBarVisibility="Auto">
<!-- your ListBoxHere -->
</ScrollViewer>

Alright, found a solution.
I've created a new default style for the ScrollViewer by following this MSDN article. Then I've changed the part where the scrollbars are placed.
Original behaviour
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="1">
<ScrollContentPresenter CanContentScroll="True" Content="{TemplateBinding ScrollViewer.Content}" />
</Border>
<ScrollBar Orientation="Vertical" Grid.Row="0" Grid.Column="0" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}" Value="{TemplateBinding ScrollViewer.VerticalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}" Name="PART_VerticalScrollBar" Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}" />
<ScrollBar Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}" Value="{TemplateBinding ScrollViewer.HorizontalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}" Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"/>
</Grid>
New behaviour
<Grid>
<!-- Presentation below is different from the default: the scrollbar is overlayed on the content. -->
<ScrollContentPresenter CanContentScroll="True" Content="{TemplateBinding ScrollViewer.Content}" />
<ScrollBar Orientation="Vertical" HorizontalAlignment="Right" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}" Value="{TemplateBinding ScrollViewer.VerticalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}" Name="PART_VerticalScrollBar" Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}" />
<ScrollBar Orientation="Horizontal" VerticalAlignment="Bottom" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}" Value="{TemplateBinding ScrollViewer.HorizontalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}" Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"/>
</Grid>
Now the scrollbars are overlayed on the content so they don't take additional space when visible. Of course the content should now reserve space for the content.

As you said in your question, you just need to reserve the width for the vertical scrollbar, following XAML code will give you some idea.
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/> <!-- reserved for the vertical scrollbar -->
</Grid.ColumnDefinitions>
<Listbox .../>
</Grid>
</ScrollViewer>