デバイスを垂直にスクロールするとき、ビューの下部にあるボタンを修正するにはどうすればよいですか？

私はGusmanのアドバイスに従っていると私は、この順にレイアウトによって配置：デバイスを垂直にスクロールするとき、ビューの下部にあるボタンを修正するにはどうすればよいですか？

私は全体のレイアウト全体でスクロールしたとき、私のボタンが私のデバイスビューの下部に固定されたことにしたい

->StackLayout, VerticalOptions=FillAndExpand 
    ->ScrollView, VerticalOptions=FillAndExpand 
    ->RelativeLayout 
    ->StackLayout 
    ->StackLayout 
    ->Button, VerticalOptions=EndAndExpand

。ただし、ビューには、償還ボタンやフルスクロールバーは表示されません。なぜ私はこれらの2つの要素がビューに表示されていないのか分かりません。

デバイスを縦方向にスクロールするとき、ビューの下部にあるボタンを修正するにはどうすればよいですか？

->ScrollView 
    ->RelativeLayout 
    ->StackLayout 
    ->StackLayout 
    ->Button

しかし、ページがスクロールされた場合でも、下のボタンを修正したい：私はあなたがこのような何かをしたい理解aclarationについては

public StackLayout OffersSlideViewCarouselChild(Offer offer) 
{ 
    Image productImage = new Image 
    { 
     Source = ImageSource.FromUri(new Uri(offer.Image.Replace("https://", "http://"))), 
     HorizontalOptions = LayoutOptions.CenterAndExpand, 
     VerticalOptions = LayoutOptions.CenterAndExpand, 
     HeightRequest = 300, 
     WidthRequest = 300, 
     Aspect = Aspect.AspectFit 
    }; 

    var topStackLayout = new StackLayout 
    { 
     HorizontalOptions = LayoutOptions.CenterAndExpand, 
     VerticalOptions = LayoutOptions.Center, 
    }; 
    topStackLayout.Children.Add(productImage); 

    StackLayout contentStackLayout = new StackLayout 
    { 
     Padding = new Thickness(16, 16, 16, 10), 
     Orientation = StackOrientation.Vertical, 
     HorizontalOptions = LayoutOptions.FillAndExpand, 
    }; 
    var savedBtn = SavedButtonLayout(offer.IsSelected, offer.Id); 
    var redeemBtn = RedeemBtnLayout(offer.Id); 
    var timeRemainingLabel = TimeRemainingLayout(offer, offer.Id); 

    contentStackLayout.Children.Add(new UILabel(16) { 
     Text = offer.ProductName, 
     TextColor = ColorHelper.FromHex(CoreTheme.COLOR_OFFERCELL_PRODUCT_TEXT), 
     FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD 
    }); 

    contentStackLayout.Children.Add(new UILabel(14) { 
     Text = offer.LongRewardsMessage, 
     TextColor = ColorHelper.FromHex(CoreTheme.COLOR_DEAL_PAGE_LONG_REWARD_MESSAGE_RED), 
     FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD 

    }); 

    if (!string.IsNullOrEmpty(offer.PowerMessage)) { 
     var htmlText = string.Format("<html><body style='color:#9b9b9b'>{0}</body></html>", offer.PowerMessage.Replace(@"\", string.Empty)); 

     var browser = new WebView() { 
      HeightRequest = (DeviceDisplaySettings.defaultheight > 600) ? 240 : 150, 
      Source = new HtmlWebViewSource() { Html = htmlText }, 
     }; 
     browser.Navigating += OnNavigating; 

     contentStackLayout.Children.Add(browser); 
    } 

    var mainRelLayout = new RelativeLayout(); 

    mainRelLayout.Children.Add(savedBtn, 
     xConstraint: Constraint.Constant(0), 
     yConstraint: Constraint.Constant(0), 
     widthConstraint: Constraint.RelativeToParent((parent) => 
     { 
      return parent.Width; 
     }), 
     heightConstraint: Constraint.RelativeToParent((parent) => 
     { 
      return 40; 
     }) 
     ); 


    mainRelLayout.Children.Add(topStackLayout, 
     Constraint.RelativeToParent((parent) => { return (parent.Width - productImage.Width)/2; }), 
     Constraint.RelativeToParent((parent) => { return parent.Y; }) 
    ); 

    mainRelLayout.Children.Add(timeRemainingLabel, 
     null, 
     Constraint.RelativeToView(topStackLayout, (parent, sibling) => { return sibling.Height; }) 
     ); 

    mainRelLayout.Children.Add(contentStackLayout, 
     null, 
     Constraint.RelativeToView(topStackLayout, (parent, sibling) => { return sibling.Height; }) 
    ); 


    var mainScrollView = new ScrollView() 
    { 
     VerticalOptions = LayoutOptions.FillAndExpand, 
     Orientation = ScrollOrientation.Vertical, 
     WidthRequest = DeviceDisplaySettings.defaultwidth, 
     HeightRequest = DeviceDisplaySettings.defaultheight, 
     Content = mainRelLayout 
    }; 

    var mainStackLayout = new StackLayout() 
    { 
     Spacing = 0, 
     Padding = new Thickness(0, 0, 0, 0), 
     VerticalOptions = LayoutOptions.FillAndExpand, 
     HorizontalOptions = LayoutOptions.FillAndExpand, 
     Orientation = StackOrientation.Vertical, 
     Children = { mainScrollView, redeemBtn } 

    }; 

    return mainStackLayout; 
}

出典

2016-04-05 Kala J

スクロールビュー内にrelativeLayoutを追加するか、スクロールビューを相対レイアウトに追加したいとしますか？ – Gusman

私は相対レイアウトを持っていますが、全体のビューを水平にスクロール可能にしたいと考えています。それは理にかなっていますか？おそらくスクロールビューを使って相対レイアウトにするのでしょうか？そうですか？ありがとう！ –

あなたが提供するワイヤフレーム（http://imgur.com/wWBUNud）を見た後に、これは私が使用するものです

<?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="FormsSandbox.XamlPage"> 

    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <ScrollView Orientation="Vertical"> 

      <!---Using StackLayout here to make sure scrolling works as 
       expected - but put your RelativeLayout content here instead --> 
      <StackLayout Spacing="0"> 
       <BoxView BackgroundColor="Red" HeightRequest="50"/> 
       <BoxView BackgroundColor="Yellow" HeightRequest="100"/> 
       <BoxView BackgroundColor="Red" HeightRequest="50"/> 
       <BoxView BackgroundColor="Yellow" HeightRequest="100"/> 
       <BoxView BackgroundColor="Red" HeightRequest="50"/> 
       <BoxView BackgroundColor="Yellow" HeightRequest="100"/> 
       <BoxView BackgroundColor="Red" HeightRequest="50"/> 
       <BoxView BackgroundColor="Yellow" HeightRequest="100"/> 
       <BoxView BackgroundColor="Red" HeightRequest="50"/> 
       <BoxView BackgroundColor="Yellow" HeightRequest="100"/> 
       <BoxView BackgroundColor="Red" HeightRequest="50"/> 
       <BoxView BackgroundColor="Yellow" HeightRequest="100"/> 
       <BoxView BackgroundColor="Red" HeightRequest="50"/> 
      </StackLayout> 

     </ScrollView> 

     <Button Grid.Row="1" Text="REDEEM"/> 
    </Grid> 

</ContentPage>

（私はもっと明白な視覚的な構造を作るためにここにXAMLを使用しています注）

出典

2016-04-05 18:03:31

更新された投稿をご覧ください。私の償還ボタンが私のビューに表示されません。 –

StackLayoutは、更新されたコードに従って画面より大きくなりました。 ScrollViewには、デバイスの画面サイズに等しい幅/高さの要求が与えられ、そのボタンはそれに対応するように展開されるStackLayoutの内側に配置されます。したがって、ボタンはおそらく画面の下にあります。 –

目標が何であるかのワイヤフレームを提供できる場合は、手助けするほうが簡単でしょう –

：ここ

は私の最新のコードです。その構造により

はそれを行うだけでは不可能であるが、それは、このような構造とそれを修正するのは非常に簡単です：

->StackLayout, VerticalOptions=FillAndExpand 
    ->ScrollView, VerticalOptions=FillAndExpand 
    ->RelativeLayout 
     ->StackLayout 
     ->StackLayout 
    ->Button, VerticalOptions=EndAndExpand

その構造を使用すると、入力されますルートStackLayoutどこ巣ScrollViewを持っていますボタンの占めるスペースを除いて、すべてのスクリーンが画面の下部に貼り付けられます。

希望します。

乾杯。

出典

2016-04-05 17:12:14 Gusman

私はそれを試してみましょうが、ボタンがスタックレイアウト内にある場合はどうなりますか？ –

ボタンを下にスクロールしたいので、スクロールレイアウトの外側にスクロールレイアウトの外側に配置する必要があります。別のStackLayoutでボタンを囲むと、スクロールビューの下に追加する間は何も行いません（ただし、ページの一番下には粘り気のあるものがありますが、不要な別のコンテナを追加するだけです。ルートスタックのレイアウトでこれを行うことができます）。 – Gusman

私はもう1つの質問があります。ScrollViewには "Children"の定義が含まれていません。相対レイアウトを子としてScrollViewに追加する場合です。それ、どうやったら出来るの？ –

デバイスを垂直にスクロールするとき、ビューの下部にあるボタンを修正するにはどうすればよいですか？

答えて

関連する問題