locked
ScrollBar for the Rectangle Sketch Styles in Expression Blend SketchFlow RRS feed

  • Question

  • Hi,

    I am doing a project in SketchFlow WPF in that, I have placed a rectangle sketch element inside that rectangle sketch, i have placed a checkbox(select all) in 1st column, a basictextblock in the 2nd column as Type and another basictextblock in the 3rd column as File Name as headers.

    Below that the 1st column items are empty as I mouse over on the elements, the checkbox appears the 2nd column will have images like (excel icon, ppt icon, word icon, folder icon...) and the 3rd column would be the name of the file.

    I wanted to get the scrollbar on the rectangle sketch if I move further down after 5 items... I have tried witht he scroll viewer but it is not happening. Could anyone please help me in this.

    Thanks

    Rajini

    Tuesday, May 11, 2010 8:15 AM

Answers

  • I believe the main problem here is that none of your content is inside the scrollviewer.  For a scrollviewer to work, the items need to be children of the scrollviewer, not just on top of it. Your xaml should have this form:

     

    <ScrollViewer>

    <Grid>

    <!-- all of your controls -->

    </Grid>

    </ScrollViewer>

     

    Here is how I would suggest you get to that point:

    1. Select all of the items you want inside the scroll viewer, right click one of them, select group into -> grid

    2. Drag that new grid in the objects and timeline panel and drop it on the scroll viewer, this should reparent the grid into the scrollviewer.

     

    Hope that helps.

    • Proposed as answer by Chuck HaysModerator Wednesday, May 12, 2010 1:10 PM
    • Marked as answer by Rajini G Thursday, May 13, 2010 5:59 AM
    Wednesday, May 12, 2010 1:10 PM
    Moderator

All replies

  • Could you post a screenshot of what you have vs what you want?  Your description is a bit difficult to understand as to what exactly you are trying to create.
    Tuesday, May 11, 2010 1:38 PM
    Moderator
  • The below is the XAML code

    <Grid x:Name="LayoutRoot" Background="White">
      <ScrollViewer Margin="236,151,212.667,164.667" Style="{DynamicResource ScrollViewer-Sketch-List}"/>
      <ps:SketchRectangleUC Margin="236.667,151,229.333,164.667" Style="{DynamicResource Rectangle-Sketch}" FocusVisualStyle="{DynamicResource FocusControl-Sketch}"/>
      <CheckBox HorizontalAlignment="Left" Style="{DynamicResource CheckBox-Sketch}" VerticalAlignment="Top" Content="" Margin="246.667,158.334,0,0" Width="12" Height="12"/>
      <TextBlock HorizontalAlignment="Left" Margin="269.334,162.667,0,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Width="29.333" Height="13.333" Text="Type" FontSize="13.333"/>
      <TextBlock Margin="300.004,162.667,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="13.333" FontSize="13.333" Text="Name"/>
      <Image HorizontalAlignment="Left" Margin="272.666,190.667,0,0" VerticalAlignment="Top" Width="15" Height="12" Source="Images/foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,190.002,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="13.333" FontSize="13.333" Text="Design Explorations"/>
      <Image HorizontalAlignment="Left" Margin="272.666,210.668,0,0" VerticalAlignment="Top" Width="15" Height="12" Source="Images\foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,210.003,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="13.333" FontSize="13.333" Text="Interaction Designs"/>
      <Image HorizontalAlignment="Left" Margin="272.666,230.669,0,237.331" Width="15" Source="Images\foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,230.004,229.333,236.663" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Intern Presentations"/>
      <Image HorizontalAlignment="Left" Margin="271.666,0,0,215.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images/ppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,216.662" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Feature Goals Contra..." VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="271.666,0,0,215.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images/ppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,216.662" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Feature Goals Contra..." VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,213.995" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images/vppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,195.327" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Create Site 03" VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,192.66" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images\vppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,173.325" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Create Site 03" VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,171.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images/excelicon.jpg" Stretch="Fill"/>
      <ps:SketchRectangleUC Margin="236.667,151,229.333,164.667" Style="{DynamicResource Rectangle-Sketch}"/>
      <CheckBox HorizontalAlignment="Left" Margin="246.667,158.334,0,0" Style="{DynamicResource CheckBox-Sketch}" VerticalAlignment="Top" Width="12" Height="12" Content=""/>
      <TextBlock HorizontalAlignment="Left" Margin="269.334,162.667,0,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Width="29.333" Height="13.333" FontSize="13.333" Text="Type"/>
      <TextBlock Margin="300.004,162.667,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="13.333" FontSize="13.333" Text="Name"/>
      <Image HorizontalAlignment="Left" Margin="272.666,190.667,0,0" VerticalAlignment="Top" Width="15" Height="12" Source="Images\foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,190.002,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="13.333" FontSize="13.333" Text="Design Explorations"/>
      <Image HorizontalAlignment="Left" Margin="272.666,210.668,0,0" VerticalAlignment="Top" Width="15" Height="12" Source="Images\foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,210.003,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="13.333" FontSize="13.333" Text="Interaction Designs"/>
      <Image HorizontalAlignment="Left" Margin="272.666,230.669,0,237.331" Width="15" Source="Images\foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,230.004,229.333,236.663" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Intern Presentations"/>
      <Image HorizontalAlignment="Left" Margin="271.666,0,0,215.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images/ppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,216.662" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Feature Goals Contra..." VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="271.666,0,0,215.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images/ppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,216.662" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Feature Goals Contra..." VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,213.995" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images\vppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,195.327" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Create Site 03" VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,192.66" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images\vppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,173.325" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Create Site 03" VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,171.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images\excelicon.jpg" Stretch="Fill"/>
      <ps:SketchRectangleUC Margin="236.667,151,229.333,164.667" Style="{DynamicResource Rectangle-Sketch}"/>
      <TextBlock HorizontalAlignment="Left" Margin="269.334,162.667,0,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Width="29.333" Height="13.333" FontSize="13.333" Text="Type"/>
      <TextBlock Margin="300.004,162.667,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="13.333" FontSize="13.333" Text="Name"/>
      <Image HorizontalAlignment="Left" Margin="272.666,190.667,0,0" VerticalAlignment="Top" Width="15" Height="12" Source="Images\foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,190.002,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="13.333" FontSize="13.333" Text="Design Explorations"/>
      <Image HorizontalAlignment="Left" Margin="272.666,210.668,0,0" VerticalAlignment="Top" Width="15" Height="12" Source="Images\foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,210.003,229.333,0" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Height="16.001" FontSize="13.333" Text="Interaction Designs"/>
      <Image HorizontalAlignment="Left" Margin="272.666,230.669,0,237.331" Width="15" Source="Images\foldericon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,230.004,229.333,236.663" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Intern Presentations"/>
      <Image HorizontalAlignment="Left" Margin="271.666,0,0,215.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images/ppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,216.662" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Feature Goals Contra..." VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="271.666,0,0,215.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images/ppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,216.662" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Feature Goals Contra..." VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,213.995" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images\vppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,195.327" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Create Site 03" VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,192.66" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images\vppticon.jpg" Stretch="Fill"/>
      <TextBlock Margin="300.004,0,229.333,173.325" Style="{DynamicResource BasicTextBlock-Sketch}" FontSize="13.333" Text="Create Site 03" VerticalAlignment="Bottom" Height="13.333"/>
      <Image HorizontalAlignment="Left" Margin="272.667,0,0,171.334" VerticalAlignment="Bottom" Width="16" Height="16" Source="Images\excelicon.jpg" Stretch="Fill"/>
      <CheckBox HorizontalAlignment="Left" Margin="249.334,158.668,0,0" Style="{DynamicResource CheckBox-Sketch}" VerticalAlignment="Top" Width="12" Height="12" Content="" RenderTransformOrigin="0.727,0.516"/>
     </Grid>

     

    Thanks in advance.

    Rajini

    Wednesday, May 12, 2010 10:16 AM
  • sorry I forgot to attach the screenshot

    http://www.box.net/shared/4jvpt4gdqa

    Wednesday, May 12, 2010 10:17 AM
  • I believe the main problem here is that none of your content is inside the scrollviewer.  For a scrollviewer to work, the items need to be children of the scrollviewer, not just on top of it. Your xaml should have this form:

     

    <ScrollViewer>

    <Grid>

    <!-- all of your controls -->

    </Grid>

    </ScrollViewer>

     

    Here is how I would suggest you get to that point:

    1. Select all of the items you want inside the scroll viewer, right click one of them, select group into -> grid

    2. Drag that new grid in the objects and timeline panel and drop it on the scroll viewer, this should reparent the grid into the scrollviewer.

     

    Hope that helps.

    • Proposed as answer by Chuck HaysModerator Wednesday, May 12, 2010 1:10 PM
    • Marked as answer by Rajini G Thursday, May 13, 2010 5:59 AM
    Wednesday, May 12, 2010 1:10 PM
    Moderator