title: Cannot scroll unless I set a width
body: <p>My WPF application displays a timeline as a UserControl and as such, uses a scrollviewer.</p>
  
  <p>The width of the UserControl depends on certain values and so could be 0 pixels wide to N wide.</p>
  
  <p>The problem I have is getting WPF to know how wide this is.</p>
  
  <pre><code>&lt;UserControl x:Class="TimeLineCanvas.UserControls.TimeLine"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
           xmlns:helper="clr-namespace:TimeLineCanvas.Helpers"
           mc:Ignorable="d" 
           d:DesignHeight="300" d:DesignWidth="300"
           DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1,AncestorType=Window}}"&gt;
  &lt;Grid&gt;
  
      &lt;Grid.Resources&gt;
          &lt;ResourceDictionary Source="../ResourceDictionary.xaml" /&gt;
      &lt;/Grid.Resources&gt;
  
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="300" /&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="450"&gt;&lt;/ColumnDefinition&gt;
          &lt;ColumnDefinition Width="200"&gt;&lt;/ColumnDefinition&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Row="0" Grid.Column="0" Margin="10"&gt;
          &lt;Grid&gt;
              &lt;!--&lt;Grid HorizontalAlignment="Left" Width="500"&gt;--&gt;
  
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="40" /&gt;
                  &lt;RowDefinition Height="110" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Canvas x:Name="MyCanvasMarkers" Grid.Row="0"  VerticalAlignment="Top" Grid.Column="0" /&gt; &lt;!-- this will always be the widest of the canvas's--&gt;
  
              &lt;Canvas x:Name="MyCanvasShowEvents" Grid.Row="1" Grid.Column="0" /&gt;
  
              &lt;Canvas x:Name="MyCanvasFailEvents" Grid.Row="1" Grid.Column="0" /&gt;
          &lt;/Grid&gt;
      &lt;/ScrollViewer&gt;
  
      &lt;!-- I doubt anything below this is useful for this post but I keep it in case I'm wrong--&gt;
  
      &lt;Grid x:Name="ConfigurationGrid" Grid.Column="1" Grid.Row="0" &gt;
  
          &lt;StackPanel&gt;
              &lt;Expander IsExpanded="True"&gt;
                  &lt;Expander.Header&gt;
                      &lt;TextBlock Text="Zoom" /&gt;
                  &lt;/Expander.Header&gt;
                  &lt;Expander.Content&gt;
                      &lt;Border Style="{StaticResource LightBorder}"&gt;
                          &lt;StackPanel&gt;
  
                              &lt;TextBlock Text="Select Zoom Out Level" /&gt;
                              &lt;ComboBox ItemsSource="{Binding ScaleFactorOptions}" 
                SelectedItem="{Binding SelectedScaleFactor, UpdateSourceTrigger=PropertyChanged}"                   
                HorizontalAlignment="Left" 
                SelectionChanged="ZoomLevel_SelectionChanged"
                &gt;
                                  &lt;ComboBox.Resources&gt;
                                      &lt;helper:ZoomConverter x:Key="ZoomConverter" /&gt;
                                  &lt;/ComboBox.Resources&gt;
                                  &lt;ComboBox.ItemTemplate&gt;
                                      &lt;DataTemplate&gt;
                                          &lt;TextBlock Text="{Binding Converter={StaticResource ZoomConverter}}" /&gt;
                                      &lt;/DataTemplate&gt;
                                  &lt;/ComboBox.ItemTemplate&gt;
                              &lt;/ComboBox&gt;
                          &lt;/StackPanel&gt;
                      &lt;/Border&gt;
                  &lt;/Expander.Content&gt;
              &lt;/Expander&gt;
  
              &lt;Expander IsExpanded="True" &gt;
                  &lt;Expander.Header&gt;
                      &lt;TextBlock Text="Time Period" /&gt;
                  &lt;/Expander.Header&gt;
                  &lt;Expander.Content&gt;
                      &lt;Border Style="{StaticResource LightBorder}"&gt;
                          &lt;StackPanel&gt;
                              &lt;TextBlock Text="Change Time Period" /&gt;
                              &lt;ComboBox ItemsSource="{Binding PeriodOptions}" 
                SelectedItem="{Binding SelectedPeriod, UpdateSourceTrigger=PropertyChanged}"                   
                HorizontalAlignment="Left" 
                SelectionChanged="TimePeriod_SelectionChanged"
                &gt;
                              &lt;/ComboBox&gt;
                          &lt;/StackPanel&gt;
                      &lt;/Border&gt;
                  &lt;/Expander.Content&gt;
              &lt;/Expander&gt;
  
              &lt;Expander IsExpanded="True"&gt;
                  &lt;Expander.Header&gt;
                      &lt;TextBlock Text="Properties" /&gt;
                  &lt;/Expander.Header&gt;
                  &lt;Expander.Content&gt;
                      &lt;Border Style="{StaticResource LightBorder}"&gt;
                          &lt;StackPanel&gt;
                              &lt;TextBlock x:Name="txtProperty"/&gt;
                          &lt;/StackPanel&gt;
                      &lt;/Border&gt;
                  &lt;/Expander.Content&gt;
              &lt;/Expander&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>As you can see in my code above, I've commented out a line where I set the width to 500. When I do this, the scrollbar appears and I can scroll along for that value which may or may not coincide with the width of my canvas. </p>
  
  <p>I also tried adding a <code>ColumnDefintion = Auto</code> just to see if this would help, it didn't.</p>
  
  <p>Do I have to work out how wide the Canvas is in the code behind and then manually set the width or can XAML do this automatically for me by using the <code>Stretch</code> within a <code>HoriztonalAlignment</code> property (or similar)?</p>