Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

Combining ScrollView with RelativeLayout and Childs

$
0
0

Hi guys,

I'm rather new to Xamarin and ran in to a problem. I've created 80% of the view code through my .xaml.cs file and 20% through my .xaml file.
Code in xaml.cs file:

` ///
/// The _calendar view
///
readonly CalendarView _calendarView;
///
/// The _relative layout
///
readonly RelativeLayout _relativeLayout;
///
/// The _stacker
///
readonly StackLayout _stacker;

    /// <summary>
    /// Initializes a new instance of the <see cref="CalendarPage"/> class.
    /// </summary>
    public CalendarPage()
    {
        InitializeComponent();

        listViewCalendars.HasUnevenRows = true;

        //We will fetch all records >= today for calendar items.
        RefreshCalendarListView(DateTime.Today.ToString("dd-M-yyyy HH:mm:ss"));

        _relativeLayout = new RelativeLayout()
        {
            HorizontalOptions = LayoutOptions.StartAndExpand,
            VerticalOptions = LayoutOptions.StartAndExpand,
        };
        Content = _relativeLayout;

        _calendarView = new CalendarView()
        {
            //BackgroundColor = Color.Blue,
            //MinDate = CalendarView.FirstDayOfMonth(DateTime.Now),
            //Number of months you can go back in calendar (so 12 month before the current month)
            MinDate = CalendarView.FirstDayOfMonth((DateTime.Now.AddMonths(-12))),
            //Number of months you can go ahead in the calendar. (so 24 months after the current month in this code)
            MaxDate = CalendarView.LastDayOfMonth(DateTime.Now.AddMonths(24)),
            HighlightedDateBackgroundColor = Color.FromRgb(227, 227, 227),
            ShouldHighlightDaysOfWeekLabels = false,
            SelectionBackgroundStyle = CalendarView.BackgroundStyle.CircleFill,
            TodayBackgroundStyle = CalendarView.BackgroundStyle.CircleOutline,
            HighlightedDaysOfWeek = new DayOfWeek[] { DayOfWeek.Saturday, DayOfWeek.Sunday },
            ShowNavigationArrows = true,
            MonthTitleFont = Font.OfSize("Open 24 Display St", NamedSize.Medium)

        };

        _relativeLayout.Children.Add(_calendarView,
            Constraint.Constant(0),
            Constraint.Constant(0),
            Constraint.RelativeToParent(p => p.Width),
            //Changing this (1.8) will make the calendar bigger or smaller. 2 will make it bigger, 1 smaller for example.
            Constraint.RelativeToParent(p => p.Height * 1.8 / 3));


        _relativeLayout.Children.Add(listViewCalendars,
            //How far the text in the Listview should be from the left.
            Constraint.Constant(0),
            //Determinates the height from the top where the text for all calendar items should start.
            Constraint.RelativeToParent(p => p.Height * 1.8 / 3),
            //Width for text inside gray container from ListView
            Constraint.RelativeToParent(p => p.Width),
            Constraint.RelativeToParent(p => p.Height * 2 / 3)
        );
        }`

Code in xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myProject.Pages.CalendarPage">
  <ScrollView>
  <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand">
      <ListView x:Name="listViewCalendars" ItemSelected="CalendarItemSelected" >
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <ViewCell.ContextActions>
                <MenuItem Clicked="OnDelete"
                   Text="Delete" IsDestructive="True" CommandParameter="{Binding Id}"  />
                <!-- This binds to the Id of the record. This is then accessible in the method OnDelete to effectively delete the horse. -->
              </ViewCell.ContextActions>
              <StackLayout Orientation="Vertical" Padding="10">
                <StackLayout Orientation="Horizontal">
                  <Label Text="{Binding StartDate, StringFormat='{0:dd/MM/yyyy}'}" HorizontalOptions="Start" TextColor="Gray"/>
                  <BoxView Color="#63EB67" WidthRequest="5" HeightRequest="7"/>
                  <Label Text="{Binding HorseName}" HorizontalOptions="StartAndExpand" TextColor="Gray" FontAttributes="Bold"/>
                  <Label Text="{Binding ContactName}" HorizontalOptions="EndAndExpand" TextColor="Gray" FontAttributes="Bold"/>
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                  <Label Text="{Binding EndDate, StringFormat='{0:dd/MM/yyyy}'}" HorizontalOptions="Start" TextColor="Gray"/>
                  <BoxView Color="#63EB67" WidthRequest="5" HeightRequest="7"/>
                  <Label Text="{Binding Remarks}" VerticalOptions="CenterAndExpand" TextColor="Gray"/>
                </StackLayout>
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
  </StackLayout>
  </ScrollView>
</ContentPage>

Everything works fine except one thing: my page is not scrollable so my ListView falls off the screen and is inacessible. I've tried to add a scrollview around it in the .xaml file but that doesn't work.
I've tried the same through the xaml.cs file but I can't get it to 'wrap' around all the rest..
Could anybody tell me what is the correct way to do this and perhaps give me a little sample?

Thanks


Viewing all articles
Browse latest Browse all 77050

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>