I'm very new to nativescript, and I'm lost with the container layout. How can I set a webview in fullscreen with 2 floating bottoms, over the webview, fixed at the bottom of the app ?
!https://imgur.com/a/TMi3IQz
I tried at this time 2 solutions :
Can you help me please ?
https://play.nativescript.org/?template=play-js&id=QIXiNZ
With this, the second element is at 60px height, and in CSS, I tried to translate it to top (-60px)... But it disappears behind webview.
<GridLayout rows="*,60">
<WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
id="webViewID" width="100%" src="https://www.stackoverflow.com" />
<AbsoluteLayout class="mywidget" row="1" orientation="horizontal">
<Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
<Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
height="55" />
</AbsoluteLayout>
</GridLayout>
https://play.nativescript.org/?template=play-js&id=aPtpmB
I tried to tweak it with html, position relative for the parent, position obsolute with bottom:0px to the Stacklayout with absolut-it class.
<GridLayout class="relative-it" rows="*">
<ScrollView row="0">
<WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
id="webViewID" width="100%" src="https://www.stackoverflow.com" />
</ScrollView>
<StackLayout class="absolute-it" row="1">
<Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
<Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
height="55" />
</StackLayout>
</GridLayout>
Try this,
<GridLayout rows="*,auto" columns="*,*">
<WebView src="https://www.nativescript.org" colSpan="2" />
<Button row="1" col="0" text="Button 1" class="btn btn-primary" />
<Button row="1" col="1" text="Button 2" class="btn btn-primary" />
</GridLayout>
Updated Playground
Related
In a CollectionView i use a Border with MinimumHeightRequest , trying to change the Height with StaticRecource depending on Dark or Light Theme.
Works with change the Stroke color or the Border but not the Height. Is this the wrong way or am i missing something.
In App.xaml the Style.
<Style x:Key="Nieuwslight" TargetType="Border">
<Setter Property="MinimumHeightRequest" Value="300" />
</Style>
<Style x:Key="NieuwsDark" TargetType="Border">
<Setter Property="MinimumHeightRequest" Value="220" />
</Style>
And the CollectionView with the Border
<CollectionView
x:Name="lstBal"
Grid.Row="1"
Grid.ColumnSpan="3"
BackgroundColor="{AppThemeBinding Light={StaticResource systemRed},
Dark={StaticResource Donkerrood}}"
ItemsSource="{Binding .}"
SelectionChanged="lstBal_SelectionChanged"
SelectionMode="Single">
<CollectionView.ItemsLayout>
<LinearItemsLayout ItemSpacing="20" Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Border x:Name="NieuwsBorder"
MinimumHeightRequest="{AppThemeBinding Light={StaticResource Nieuwslight},
Dark={StaticResource NieuwsDark}}"
Stroke="{AppThemeBinding Light={StaticResource LightBorderColor},
Dark={StaticResource Maroon}}"
StrokeShape=" RoundRectangle 10"
StrokeThickness="2">
<Grid Padding="15,0,0,0" ColumnDefinitions="*,2*">
<Frame
BackgroundColor="Transparent"
BorderColor="Transparent"
CornerRadius="15"
HeightRequest="150">
<Image
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="120">
<Image.Source>
<UriImageSource
CacheValidity="5"
CachingEnabled="True"
Uri="{Binding Foto}" />
</Image.Source>
</Image>
</Frame>
<Label
Grid.Column="1"
Padding="25,5,5,0"
FontSize="22"
Text="{Binding Fototekst}"
TextColor="{AppThemeBinding Light={StaticResource DarkColor},
Dark={StaticResource LightTextColor}}" />
<Grid>
<Grid RowDefinitions="Auto,*,Auto" />
</Grid>
</Grid>
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Solved it .
In App.xaml set the Height for Minimum or Large.
<x:Double x:Key="defaultMinimumHeightRequest">220</x:Double>
<x:Double x:Key="largeMinimumHeightRequest">300</x:Double>
And in MainPage.xaml for the Border
<Border x:Name="NieuwsBorder"
MinimumHeightRequest="{AppThemeBinding Light={StaticResource defaultMinimumHeightRequest},
Dark={StaticResource largeMinimumHeightRequest}}"/>
I use SplitView for my XAML page. Inside the SplitView, trigger behavior doesn't work.
For example:
<SplitView.Content>
<Grid>
<Button x:Name="Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click" >
<Core:GoToStateAction StateName="SplitViewState />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
</Grid>
</SplitView.Content>
When clicking the button, nothing happens. It works on elements outside the SplitView.
I guess you missed setup TargetObject value.
<Button Content="click me"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<I:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click" >
<Core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
StateName="OpenOverlayLeft"/>
</Core:EventTriggerBehavior>
</I:Interaction.Behaviors>
</Button>
UPDATED
Look at behavior with 4 buttons which placed inside SplitView.Content, SplitView.Pane and outside. All works very well.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<SplitView x:Name="MySplitView"
PaneBackground="Gray"
DisplayMode="CompactOverlay"
IsPaneOpen="True"
CompactPaneLength="50"
OpenPaneLength="280">
<SplitView.Pane>
<Grid>
<Button Content="close inside"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click" >
<core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
StateName="Closed"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Button Content="open inside"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
StateName="OpenOverlayLeft"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
</Grid>
</SplitView.Content>
</SplitView>
<Grid Grid.Column="1"
Background="Aquamarine">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Content="open outside"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
StateName="OpenOverlayLeft"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
<Button Content="close outside"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click" >
<core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
StateName="Closed"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
</Grid>
</Grid>
Look how it works:
I am having one button. On click of that button. I am opening the stackpane which is right below it. For StackPane hard coded x layout values. So at first click the stackpane shows right below the button. The prob is when I maximize or resize the window it is not adjusting it's position(x).
FXML
<Button fx:id="searchCriteriaBtn" mnemonicParsing="false" onAction="#searchCriteriaAction" styleClass="redButton" text="Search Criteria">
<StackPane fx:id="searchCriteriaPane" alignment="TOP_RIGHT" prefHeight="150.0" prefWidth="200.0" styleClass="redBorder" translateX="239.0" translateY="-6.0" visible="false">
JAVA
#FXML
private void searchCriteriaAction(ActionEvent event){
searchCriteriaPane.visibleProperty().setValue(true);
searchCriteriaBtn.layoutXProperty().bind(searchCriteriaPane.layoutXProperty());
searchCriteriaBtn.layoutYProperty().bind(searchCriteriaPane.layoutYProperty());
}
I have found out the solution of overlay dropdown menu.
<MenuButton mnemonicParsing="false" nodeOrientation="LEFT_TO_RIGHT"
styleClass="redButton" text="Search Criteria" textFill="WHITE">
<items>
<MenuItem mnemonicParsing="false"
style="-fx-background-color: transparent; -fx-padding: 0; -fx-margin: 0;">
<AnchorPane minHeight="0.0" minWidth="0.0"
prefHeight="500.0" prefWidth="345.0" styleClass="noborder">
<children>
<HBox layoutY="156.0" minHeight="185.0" minWidth="345.0"
prefHeight="185.0" prefWidth="357.0" />
<HBox layoutX="5.0" layoutY="316.0" prefHeight="35.0"
prefWidth="348.0">
<children>
<Text layoutX="7.0" layoutY="335.0" strokeType="OUTSIDE"
strokeWidth="0.0" text="Template Name">
<HBox.margin>
<Insets right="5.0" top="9.0" />
</HBox.margin>
</Text>
<ComboBox fx:id="templateNameComboBox" layoutX="94.0"
layoutY="330.0" prefWidth="248.0" promptText="Select Template Name">
<HBox.margin>
<Insets left="7.0" />
</HBox.margin>
</ComboBox>
</children>
</HBox>
</children>
</AnchorPane>
</MenuItem>
</items>
<HBox.margin>
<Insets left="6.0" />
</HBox.margin>
<cursor>
<Cursor fx:constant="HAND" />
</cursor>
</MenuButton>
I need to lay out 4 buttons in 2x2 grid. All buttons must have the same size and change it when window changes it's size.
I use the following FXML now but buttons don't change their size.
<GridPane xmlns:fx="http://javafx.com/fxml">
<Button fx:id="btnLogin" text="Login" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
<Button fx:id="btnLibrary" text="Library" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
<Button fx:id="btnRegister" text="Register" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
<Button fx:id="btnHelp" text="Help" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>
That's how I managed to do it.
<GridPane xmlns:fx="http://javafx.com/fxml">
<columnConstraints>
<ColumnConstraints percentWidth="50"/>
<ColumnConstraints percentWidth="50"/>
</columnConstraints>
<rowConstraints>
<RowConstraints percentHeight="50"/>
<RowConstraints percentHeight="50"/>
</rowConstraints>
<Button fx:id="btnLogin" text="Login" GridPane.rowIndex="0" GridPane.columnIndex="0" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnLibrary" text="Library" GridPane.rowIndex="0" GridPane.columnIndex="1" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnRegister" text="Register" GridPane.rowIndex="1" GridPane.columnIndex="0" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnHelp" text="Help" GridPane.rowIndex="1" GridPane.columnIndex="1" maxWidth="10000" maxHeight="10000"/>
</GridPane>
I had the same problem with a ComboBox and solved it this way:
<ComboBox hgrow="ALWAYS" maxWidth="Infinity" />
While working on MVVM in Silverlight 4.0. I got stuck with following problem.
See the following Xaml. And note that in TextBox1 the Method UpdateText (under interaction triggers) is working but in TextBox2 which is the part of DataGrid's Template,Here method 'UpdateText' is not working at all. Can anyone help me out to call a method on TextChanged Event of TextBox2?
(UpdateText is just a simple method in MVVM class working with TextBox1 but not with TextBox2)
Here is the xaml :
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="MVVMEventTriggerDemo.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModel="clr-namespace:MVVMEventTriggerDemo.ViewModels"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:si="clr-namespace:Expression.Samples.Interactivity;assembly=Expression.Samples.Interactivity"
Height="600" Width="700">
<UserControl.Resources>
<viewModel:MainViewModel x:Key="MainViewmodel"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource MainViewmodel}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="258*" />
<ColumnDefinition Width="262*" />
</Grid.ColumnDefinitions>
<TextBox x:Name="textbox1" Text="{Binding EmployeeName, Mode=TwoWay}" Width="100" Height="30" Margin="142,77,20,289" Grid.Column="1">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<si:CallDataMethod Method="UpdateText"/>
<si:ShowMessageBox Caption="Thank you"
Message="Thanks for trying the Example"
MessageBoxButton="OK"/>
<si:SetProperty TargetName="textbox1" PropertyName="Background" Value="PaleGoldenrod"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<Button Content="Show Message" Width="100" Height="25" Margin="142,113,20,258" Grid.Column="1">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<si:CallDataMethod Method="HandleShowMessage"/>
<si:ShowMessageBox Caption="Thank you"
Message="Thanks for trying the Example"
MessageBoxButton="OK"/>
<si:SetProperty TargetName="LayoutRoot" PropertyName="Background" Value="PaleGoldenrod"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<sdk:DataGrid
x:Name="dgDevice"
AutoGenerateColumns="False"
Margin="13,13,13,13"
BorderThickness="1,0,1,1"
RowBackground="White"
VerticalScrollBarVisibility="Auto" Width="320"
Opacity="0.9"
Background="White"
GridLinesVisibility="None"
HeadersVisibility="None"
HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding ActualColors,Mode=TwoWay}">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Width="320" >
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Width="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<TextBox x:Name="textbox2" Text="{Binding EmployeeName, Mode=TwoWay}" Width="100" Height="30" Margin="142,77,20,289" Grid.Column="1">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<si:CallDataMethod Method="UpdateText"/>
<si:ShowMessageBox Caption="Thank you"
Message="Thanks for trying the Example"
MessageBoxButton="OK"/>
<si:SetProperty TargetName="textbox2" PropertyName="Background" Value="PaleGoldenrod"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
</Grid>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
i not sure it can help you but in Datatemplate binding will goes like
<TextBlock Text="{Binding Path=DataContext.BusyText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" />
i think you may have to bind event same as text bind in upper sentence.