Feature Request: Scrollable Panel

[haralddvorak]

Hi!

First of all, hats off and thank you very much for all the effort you're putting into Myra! It's a very useful compilation of widget functionality which makes life easier when it come's to UI design for Monogame!

I played about with the ScrollPane a bit and everything worked as expected so far. A cool alternative to the ScrollPane would be a scrollable container widget which lets you scroll through all the child widgets. An example could be a list of textboxes, buttons or similar to scroll through.

Thanks again! I hope you keep up the great work! Cherrs, Harald

[rds1983]

Hello Harald, Thanks for the kind words. Frankly I dont quite understand your idea. As ScrollPane is already suitable for scrolling through multiple widgets. All you need to do is to set its Content to some container(i.e. Grid) and then add child widgets to that container. I.e. I've pasted following xml into the MyraPad:

<Project>
  <Panel>
    <ScrollPane>
        <Grid ColumnSpacing="8" RowSpacing="8" Id="_gridRight">
          <ColumnsProportions>
            <Proportion />
            <Proportion />
            <Proportion Type="Fill" />
          </ColumnsProportions>
          <RowsProportions>
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
            <Proportion />
          </RowsProportions>
          <TextBlock Text="Button:" Id="" />
          <Button Text="Save File" Id="_buttonSaveFile" PaddingLeft="8" PaddingRight="8" GridColumn="1" />
          <TextField Text="" Id="_textSaveFile" GridColumn="2" />
          <TextBlock Text="Another Button:" Id="" GridRow="1" />
          <Button Text="Open File" Id="_buttonOpenFile" PaddingLeft="8" PaddingRight="8" GridColumn="1" GridRow="1" />
          <TextField Text="" Id="_textOpenFile" GridColumn="2" GridRow="1" />
          <TextBlock Text="Blue Button:" Id="" GridRow="2" />
          <Button Text="Choose Folder" Id="_buttonChooseFolder" StyleName="blue" PaddingLeft="8" PaddingRight="8" GridColumn="1" GridRow="2" />
          <TextField Text="" Id="_textChooseFolder" GridColumn="2" GridRow="2" />
          <TextBlock Text="Text Button:" Id="_textButtonLabel" GridRow="3" />
          <TextButton Text="Choose Color" Id="_buttonChooseColor" PaddingLeft="8" PaddingRight="8" GridColumn="1" GridRow="3" />
          <TextBlock Text="Image Button:" Id="" GridRow="4" />
          <ImageButton Id="_imageButton" PaddingLeft="8" PaddingRight="8" GridColumn="1" GridRow="4" />
          <CheckBox Text="This is checkbox" ImageWidth="10" ImageHeight="10" GridRow="5" GridColumnSpan="2" />
          <TextBlock Text="Horizontal Slider:" Id="" GridRow="6" />
          <HorizontalSlider GridColumn="1" GridRow="6" GridColumnSpan="2" />
          <TextBlock Text="Combo Box:" GridRow="7" />
          <ComboBox SelectedIndex="1" Width="200" GridColumn="1" GridRow="7" GridColumnSpan="2">
            <ListItem Id="" Text="Red" Color="#FF0000FF" />
            <ListItem Text="Green" Color="#00FF00FF" />
            <ListItem Text="Blue" Color="#0080FFFF" />
          </ComboBox>
          <TextBlock Text="Text Field:" GridRow="8" />
          <TextField Text="" GridColumn="1" GridRow="8" GridColumnSpan="2" />
          <TextBlock Text="Spin Button:" GridRow="9" />
          <SpinButton Width="100" GridColumn="1" GridRow="9" />
          <TextBlock Text="List Box:" GridRow="10" />
          <ListBox Width="200" GridColumn="1" GridRow="10" GridColumnSpan="2">
            <ListItem Text="Red" Color="#FF0000FF" />
            <ListItem Text="Green" Color="#00FF00FF" />
            <ListItem Text="Blue" Color="#0000FFFF" />
          </ListBox>
          <TextBlock Text="Vertical Menu:" GridRow="11" />
          <VerticalMenu GridColumn="1" GridRow="11">
            <MenuItem Id="" Text="Start New Game" />
            <MenuItem Id="" Text="Options" />
            <MenuItem Id="" Text="Quit" />
          </VerticalMenu>
          <TextBlock Text="Tree" GridRow="12" />
        </Grid>
    </ScrollPane>
  </Panel>
</Project>

And scrolling works for all these widgets:

[haralddvorak]

Hi Roman! Thanks for the fast reply! Exactly what you explained, I could already accomplish. Scrolling through widgets would be great without the scroll bar like scrolling through short messages on your phone or like on twitter. You'd tap and hold on a widget inside a container and slide down (or use the mouse wheel) to scroll. Hope, I could clarify the issue a bit.

Thank you very much for your support in advance! Harald

[rds1983]

Hi Harald, Actually one should able to use mouse wheel in ScrollPane(check MyraPad or Notepad sample). Though I think I got your idea overally. It's very useful, as it'll make make Myra usable on mobile platforms. Hopefully eventually it'll be implemented.

[WTRipper]

I think there is already a lot of code in place that could be reused. For example if you change this line to:

var r = ActualBounds;

You already have a basic vertical touch scroll.. From a first test one would still need to inverse the scroll and make sure to not propagate the touch event to the children.