I've this problem using GridLayout, tested on two Samsung devices.
This is an excerpt from the layout:
<GridLayout
a:layout_width="0dp"
a:layout_weight="2"
a:layout_height="match_parent"
a:rowCount="5"
a:columnCount="4">
<TextView
a:id="#+id/tvDescentsFemaleCount"
style="#style/dataPanelControlLabels"
a:layout_width="0dp"
a:layout_row="0"
a:layout_column="0"
a:layout_columnWeight="3"
a:layout_columnSpan="3"
a:text="#string/pnlVisitDescentsFemaleDescentNumber" />
<Button
a:id="#+id/bDescentsFemaleCount"
style="#style/dataButton"
a:layout_width="0dp"
a:layout_row="1"
a:layout_column="0"
a:layout_columnWeight="3"
a:layout_columnSpan="3"
a:layout_marginLeft="3dp"
a:layout_marginRight="3dp" />
<ImageView
a:id="#+id/ivDescentsMoveLeft"
a:layout_width="0dp"
a:layout_row="1"
a:layout_column="3"
a:layout_columnWeight="1"
a:src="#drawable/freccia_indietro"
a:adjustViewBounds="true"
a:scaleType="centerInside" />
<TextView
a:id="#+id/tvDescentsMaleCount"
style="#style/dataPanelControlLabels"
a:layout_width="0dp"
a:layout_row="2"
a:layout_column="0"
a:layout_columnSpan="3"
a:layout_columnWeight="3"
a:text="#string/pnlVisitDescentsMaleDescentNumber" />
<Button
a:id="#+id/bDescentsMaleCount"
style="#style/dataButton"
a:layout_width="0dp"
a:layout_row="3"
a:layout_column="0"
a:layout_columnSpan="3"
a:layout_columnWeight="3"
a:layout_marginLeft="3dp"
a:layout_marginRight="3dp" />
<ImageView
a:id="#+id/ivDescentsMoveRight"
a:layout_width="0dp"
a:layout_row="3"
a:layout_column="3"
a:layout_columnWeight="1"
a:src="#drawable/freccia_avanti"
a:adjustViewBounds="true"
a:scaleType="centerInside" />
<ImageView
a:id="#+id/ivDescentsAdd"
a:layout_width="0dp"
a:layout_row="4"
a:layout_column="0"
a:layout_columnWeight="1"
a:layout_margin="3dp"
a:src="#drawable/add"
a:adjustViewBounds="true"
a:scaleType="centerInside"
a:padding="6dp" />
<ImageView
a:id="#+id/ivDescentsRemove"
a:layout_width="0dp"
a:layout_height="wrap_content"
a:layout_columnWeight="1"
a:layout_row="4"
a:layout_column="1"
a:layout_margin="3dp"
a:padding="6dp"
a:src="#drawable/meno"
a:adjustViewBounds="true"
a:scaleType="centerInside" />
<ToggleButton
a:id="#+id/tbDescentsFemaleSelect"
style="#style/toggleButtonPv"
a:layout_width="0dp"
a:layout_row="4"
a:layout_column="2"
a:layout_columnWeight="1"
a:layout_height="wrap_content"
a:layout_margin="3dp"
a:textOn="#string/pnlVisitDescentsFemaleShort"
a:textOff="#string/pnlVisitDescentsFemaleShort"
a:padding="4dp" />
<ToggleButton
a:id="#+id/tbDescentsMaleSelect"
style="#style/toggleButtonPv"
a:layout_width="0dp"
a:layout_row="4"
a:layout_column="3"
a:layout_columnWeight="1"
a:layout_height="wrap_content"
a:layout_margin="3dp"
a:textOn="#string/pnlVisitDescentsMaleShort"
a:textOff="#string/pnlVisitDescentsMaleShort"
a:padding="4dp" />
</GridLayout>
On the complete layout there is another GridLayout, where the only difference is the absence of the a:layout_columnSpan attribute (I've shortened the classic namespace declaration from xmlns:android... to xlmns:a...).
This is the less-significant screenshot from my PC designer :
This is the screenshot from an SM-T535, API level 21 Samsung tablet :
On the upper left corner there is a GridLayout, on the middle right there is an android.support.v7.widget.GridLayout. I've left the layout limits only to show how the widgets are rendered.
This is the screenshot from an SM-T585, API level 24 Samsung tablet:
The GridLayout is rendered correctly, whereas the android.support.v7.widget.GridLayout on the right is rendered almost in the same way.
This is the screenshot from the same SM-T585, where all the two widgets are the standard GridLayout:
Please note also the switch bank under the GridLayout on the right; they are android.support.v7.widget.SwitchCompat, because originally I was porting the app on a GT-N800 Samsung tablet, and the standard Switch widget was not so customizable. In the Activity code I'm substituting the standard typeface with a font from an asset. Only on the SM-T585 the font is shown correctly.
The activity inherits from Activity, but inheriting from AppCompatActivity doesn't change a single pixel.
The entire project is a Xamarin app (I'm porting the same app developed for IOS, so I've to recycle a great part of the code), and the IDE is VS2017 Community edition.
The same layout (GridLayout widgets) works correctly on a Nexus 7, although the screen is too small.
Any suggestion appreciated.
Thanks.
Rodolfo.
Related
I am trying to test and example with MasterDetail. You can see the code in:
https://github.com/jrariasf/MD8/tree/master/MD8
The Master have 5 buttons to access to 4 detail pages (Home, MainPage, ViewA, ViewB and ViewC).
From ViewA, with 2 buttons I am able to load ViewB and ViewC
But I am not able to do that pushing a button in hambubrger menu then load the detail page adequated.
It only works if I put an absolute path in the CommandParameter in "PrismMasterDetailPage.xaml":
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="MD8.Views.PrismMasterDetailPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Padding="20">
<!-- TODO: // Update the Layout and add some real menu items -->
<Button Text="Home" Command="{Binding NavigateCommand}" CommandParameter="/PrismMasterDetailPage/NavigationPage/ViewA" />
<Button Text="MainPage" Command="{Binding NavigateCommand}" CommandParameter="/NavigationPage/MainPage" />
<Button Text="ViewA" Command="{Binding NavigateCommand}" CommandParameter="../ViewA" />
<Button Text="ViewB" Command="{Binding NavigateCommand}" CommandParameter="./ViewB" />
<Button Text="ViewC" Command="{Binding NavigateCommand}" CommandParameter="ViewC" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
</MasterDetailPage>
Then, in "PrismMasterDetailPageViewModel.cs"
void ExecuteCommandName(string page)
{
Console.WriteLine("PrismMasterDetailPageViewModel - ExecuteCommandName() Vamos a {0}", page);
_navigationService.NavigateAsync(page);
}
If I am in "/PrismMasterDetailPage/NavigationPage/ViewA", what I have to do to unload ViewA and load ViewB ?
For example, in App.xaml.cs the code is:
await NavigationService.NavigateAsync("PrismMasterDetailPage/NavigationPage/ViewA");
Then, execute the app on android emulator, push buttons of hamburger menu and the result it is not as I expected.
Pressing Home button, the _navigationService.GetNavigationUriPath() returns: /PrismMasterDetailPage/NavigationPage/ViewA/NavigationPage?useModalNavigation=true/ViewA
why?
If I press button ViewA or ViewB or ViewC, it don't show anything. But the OnNavigatedFrom() method is called on each View*ViewModel.cs
What is wrong?
Thanks!!
One fo the first things you need to do is understand where you are Navigating from. Navigation in Xamarin.Forms is very dependent on where you are Navigating from. Remember that without Prism you would do something like this:
var mdp = new MyMasterDetailPage
{
Detail = new NavigationPage(new ViewA)
};
In order to achieve a Hamburger Menu with Prism you typically would want a MasterDetailPage as the Application's Main Page. The next segment in the Navigation Uri must be a NavigationPage and the following page would generally be a ContentPage.
<Button Text="Home"
Command="{Binding NavigateCommand}"
CommandParameter="/PrismMasterDetailPage/NavigationPage/ViewA" />
Ok so looking at this first one, this is generally what you would use when navigating from the PrismApplication which is why it works.
<Button Text="MainPage"
Command="{Binding NavigateCommand}"
CommandParameter="/NavigationPage/MainPage" />
Looking at this one, this is really close to what you do want except you are doing an absolute navigation which means that you are resetting the Application.MainPage. What you actually need is a relative Uri because you are navigating from the MasterDetailPage.
<Button Text="ViewA"
Command="{Binding NavigateCommand}"
CommandParameter="../ViewA" />
This is completely wrong because ../{path} is only supported from within a NavigationPage and you are in a MasterDetailPage...
<Button Text="ViewB"
Command="{Binding NavigateCommand}"
CommandParameter="./ViewB" />
This is just not supported by Prism at all.
<Button Text="ViewC"
Command="{Binding NavigateCommand}"
CommandParameter="ViewC" />
This is setting the MasterDetailPage.Detail like:
mdp.Detail = new ViewC()
Of course as I mentioned above you need it to be
mdp.Detail = new NavigationPage(new ViewC());
Thanks a lot Dan Siegel ! (#Dan S.)
I have just seen your comment, a month ago, sorry.
I was a newbie in C# and Xamarin and Prism and I am still a newbie but less :-)
I have learnt and tested a lot in the last weeks and I understand better the concepts.
After reading you I know that ../{path} is only valid with a NavigationPage .
Futhermore, one problem I had was thar I was checking the value of "_navigationService.GetNavigationUriPath()" inside OnNavigatedTo method and as I read later, at that moment the UriPath is not the real final UriPath.
In my code I wrote:
public void OnNavigatedTo(INavigationParameters parameters)
{
Console.WriteLine("DEBUG - ViewAVM: We are in {0}",
_navigationService.GetNavigationUriPath());
}
I moved the GetNavigationUriPath() call to another method and the results were as I expected.
Thanks!!
With my Xamarin cross-platform app, I have a drop-down menu which is created with the following XAML code:
<ContentPage>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Add another child to my account" Order="Secondary" Priority="1" Clicked="AddAnotherChildClick" />
<ToolbarItem Text="Delete child from my account" Order="Secondary" Priority="2" Clicked="DeleteChildClick" />
<ToolbarItem Text="Log Out" Order="Secondary" Priority="3" Clicked="LogOutClick" />
</ContentPage.ToolbarItems>
</ContentPage>
I need to be able to control the background color and text color of the menu. It is currently grey with white text (see screenshot). I would like it black with orange text.
How can I change this - ideally using a global style?
If you are using Navigation page then you can do the follow:
var navPage = new NavigationPage(new YourPage());
this.MainPage = navPage;
navPage.BarBackgroundColor = Color.Orange;
navPage.BarTextColor = Color.Black;
It will work on iOS but on Android 5.0 and above the text color will not change. To change it see this link
How to change navigation bar text color in xamarin forms android
I want to make a nice Main Menu Page like the home page of Android Device in which the button images are layout in rows; each row in a page say contain 4 imageButtons.
I used the below layout, but the imageViews in each rows are not evenly size. I have these questions:
I want to have 3 imageView in a row.
How to detect What is the Width and Height of a screen, so divide it for 3 imageView? say, base on galaxy note.
How to do spacing among the 3 imageViews? Below each ImageView there is a textView to indicate the name or function of the ImageView.
Should I allow rotate? if rotate , how to enable scrolling when rotate to horizontal?
Thanks
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/myLinearLayout"
android:minWidth="25px"
android:minHeight="25px">
<LinearLayout
android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/poiImageView"
android:id="#+id/linearLayout1"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/Thumbnail1"
android:layout_width="70dp"
android:layout_height="70dp"
android:paddingLeft="10dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/Icon" />
<ImageView
android:id="#+id/Thumbnail1a"
android:layout_width="70dp"
android:layout_height="70dp"
android:paddingLeft="10dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/Icon" />
<ImageView
android:id="#+id/Thumbnail1b"
android:layout_width="70dp"
android:layout_height="70dp"
android:paddingLeft="10dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/Icon" />
</LinearLayout>
<LinearLayout>
2nd row
</LinearLayout>
<LinearLayout>
3rd row
</LinearLayout>
</LinearLayout>
I believe you're looking for GridView. GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. It handles scrolling by itself when content grows. Additionally you will get additional features packed such as memory handling, inbuilt MVC using adapter pattern etc.
A simple GridView looks as follows;
<GridView
android:id="#+id/gridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="100dp"
android:drawSelectorOnTop="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp"
android:focusable="true"
android:clickable="true"/>
You can checkout some complete GridView implementation from the following links.
Android GridView Example- Building Image Gallery in android
Download and Display Image in Android GridView
I am a openlaszlo beginner and I wnat to create an interactive web interface which simulates the indications of a vomplex astronomic clock. It should be possible to input e.g. the coodriantes and date/time or to select a realtime or timelapse modus.
I have tried to use a edittext field and button and a radiobutton group to select the informations and then to move an image according to the selsction.
When I use only the edittext field and the button, then it works. The text entry is displayed in the output edittext field and the image really rotates the arc which was given. When I add the radiobutton group, then the selected arc is displayed in the output edittext field, but no rotation of the image occurs. Can someone help?
Here is the code
<canvas>
<!-- Load of the image -->
<view name="Zeiger" x="100" y="100" resource="images/Kal_Ring_Stundenzeiger.gif" id="HandID">
<!-- Methode to rotate the image, Arc is set by the argument -->
<method name="rotate" args="Arc">
var increment = 0 + Arc;
var dur = 700;
this.animate('rotation',increment,dur);
</method>
</view>
<!-- Control unit -->
<view name="Bedienung" x="200" y="10">
<simplelayout axis="y" inset="8"/>
<text text="Output:"/>
<edittext id="outputID" text = "0"/>
<text text="Arc:"/>
<edittext id="WinkelID" text = "51"/>
<button x="000" y="160">
Rotation
<!-- Handler to execute the Method -->
<handler name="onclick">
var x = WinkelID.getText();
HandID.rotate(x);
outputID.setAttribute('text',x);
</handler>
</button>
<!-- when I remove the radiogroup, then the image rotates -->
<radiogroup id="group1ID">
<handler name="onselect">
var Arcchoice = this.getValue();
HandID.rotate(Arcchoice);
outputID.setAttribute('text',Arcchoice);
</handler>
<radiobutton value="0" text="0°" selected="true"/>
<radiobutton value="90" text="90°"/>
<radiobutton value="180" text="180°"/>
<radiobutton value="270" text="270°"/>
<radiobutton value="360" text="360°"/>
</radiogroup>
</view>
</canvas>
I've tested the code with OpenLaszlo 5.0 trunk, and it works as expected in both the SWF10 and DHTML runtime.
Here is a screenshot of the app with a resource from the LzClock widget (didn't have your SWF resource available for testing). I've entered the arc value into the textfield and clicked the button to set the rotation.
I've tested with Chrome and Firefox on Linux, haven't tested with Windows.
I created a static FlyOut control with multiple buttons. On click of those buttons different JS should fire. I created Commanddefinition for every JS function and made a refernce to them inside buttons controls. But, my buttons become disabled. If all of the buttons refer to the same commanddefinition/ js function, works fine. What am I missing? Any help will be greatly appreciated.
Here's my code:
<RibbonDiffXml>
<CustomActions>
<CustomAction Id="Add_Dynamic_Menu"
Location="Mscrm.Form.new_test.MainTab.Workflow.Controls._children">
<CommandUIDefinition>
<FlyoutAnchor Id="Sample.new_test.form.FlyoutAnchor.Static" Sequence="10"
Command="Mscrm.Enabled"
Image16by16="/_imgs/placeholders/ribbon_placeholder_16.png"
Image32by32="/_imgs/ribbon/newrecord32.png" LabelText="Sample Flyout"
Alt="Sample Flyout" TemplateAlias="isv">
<Menu Id="Sample.new_test.form.Menu">
<MenuSection Id="Sample.new_test.form.MenuSection"
Title="Menu Section Title" Sequence="15">
<Controls Id="Sample.new_test.form.MenuSection.Controls">
<Button Id="Sample.new_test.form.Controls.Button.FirstButton"
Command="Sample.FirstButtonComand" LabelText="First Button"
ToolTipTitle="First Button"
ToolTipDescription="The first button" TemplateAlias="isv"
Sequence="20"/>
<Button Id="Sample.new_test.form.Controls.Button.SecondButton"
Command="Sample.SecondButtonCommand" LabelText="Second Button"
ToolTipTitle="Second Button"
ToolTipDescription="The Second button" TemplateAlias="isv"
Sequence="20"/>
</Controls>
</MenuSection>
</Menu>
</FlyoutAnchor>
</CommandUIDefinition>
</CustomAction>
</CustomActions>
<Templates>
<RibbonTemplates Id="Mscrm.Templates"/>
</Templates>
<CommandDefinitions>
<CommandDefinition Id="Sample.FirstButtonCommand">
<EnableRules>
<EnableRule Id="Mscrm.Enabled"/>
</EnableRules>
<DisplayRules/>
<Actions>
<JavaScriptFunction FunctionName="testfirstbutton"
Library="$webresource:new_testfirstbutton"> </JavaScriptFunction>
</Actions>
</CommandDefinition>
<CommandDefinition Id="Sample.SecondButtonCommand">
<EnableRules/>
<DisplayRules/>
<Actions>
<JavaScriptFunction FunctionName="testsecondbutton"
Library="$webresource:new_testsecondbutton"> </JavaScriptFunction>
</Actions>
</CommandDefinition>
</CommandDefinitions>
<RuleDefinitions>
<TabDisplayRules/>
<DisplayRules/>
<EnableRules/>
</RuleDefinitions>
<LocLabels/>
</RibbonDiffXml>
What you are doing looks fine, so double check the webresource names and everything.
An approach to troubleshoot
1) Switch everything to the webresource/function that works
2) Add the other function to the JavaScript webresource and see if it still works (if it fails, then it was the javascript function(s)).
3) Switch one of the FunctionName's to the second function while keeping the websresource all the same.
A couple of minor things I noticed. Both of your buttons have the same sequence number. I would change firstbutton to 10. Second, you do not have the Mscrm.Enabled rule on the seconnd buttons command def.
These ribbons love to be finicky.