I am creating a form now. In a line I need only answer with yes or no. the Code now looks like this
<Label text="Billable"
labelFor="flag"/>
<Input value="{appointments>flag}"
id="flag"
placeholder="set a flag in true or false"/>
and i need radiobuttons with yes or no. I have tried to write radiobutton, but it does not work
<Label text="Billable" />
<VBox binding="{appointments>flag}">
<RadioButton text="true"/>
<RadioButton text="false"/>
</VBox>
the value property an the RadioButton is not allowed. How can i set the value from radioButton to the {appointments>flag} in ODatamodel like inputfield as above?
You can use the selectedIndex property if the RadioButtonGroup to set the Radio Button from the model.
<RadioButtonGroup columns="3" width="500px" selectedIndex="{appointments>flag}">
<buttons>
<RadioButton text="true"/>
<RadioButton text="false"/>
</buttons>
</RadioButtonGroup>
In your case, selectedIndex should be either 0 or 1, 0 being true and 1 being false
You should try using data binding the control with the model.
<RadioButtonGroup columns="3" width="500px" selectedIndex="{/flag}" buttons="{/buttons}" select="radioSelectionHandler">
<buttons>
<RadioButton text="{label}"/>
</buttons>
</RadioButtonGroup>
You controller can be something like this
onInit: function() {
var radioButtons = {
"buttons":[
{
"key" : "true",
"label" : "True"
},
{
"key" : "false",
"label" : "False"
}
] ,
}
this.getView().setModel(new sap.ui.model.json.JSONModel(radioButtons));
},
radioSelectionHandler : function(event){
var flag = this.getView().getModel().oData.flag;
sap.m.MessageToast.show(this.getView().getModel().oData.buttons[flag].key);
}
I added the key property which you use in if else check in controller rather than using the display text.
Hope this helps!
Related
I have a picker on my Xamarin form, bound to a list, and I would like that it has the first item of that list already selected when the form is opening.
My list looks like this
Languages = new List<string>();
Languages.Add("English");
Languages.Add("Nederlands");
Languages.Add("русский");
I tried like this
<Picker x:Name="PickerLanguage" Title=""
TitleColor="#004973"
FontSize="24"
ItemsSource="{Binding Languages}"
SelectedIndex="0"
SelectedItem="English">
</Picker>
and like this
<Picker x:Name="PickerLanguage" Title=""
TitleColor="#004973"
FontSize="24"
ItemsSource="{Binding Languages}"
SelectedIndex="0"
SelectedItem="0">
</Picker>
Both attemps above are based on the answer of this question
But is does not works.
How can I have it so that when the form opens, English is set as selected item/index already ?
create a property for your selected item in your c# then bind it to your picker :
private string selectedObj;
public string SelectedObj
{
get{ return selectedObj;}
set{ selectedObj= value ;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("SelectedObj"));}
}
then you can set your value to the selected object any place in your code:
SelectedObj = "English";
then bind it to picker in xaml:
<Picker x:Name="PickerLanguage" Title=""
TitleColor="#004973"
FontSize="24"
ItemsSource="{Binding Languages}"
SelectedItem="{Binding SelectedObj}">
</Picker>
I want create a ListView with iOS UITableView Grouped Style, like the image below. I tried many different ways: creating a TableView custom renderer, creatin ViewCell custom renderer, creating a content view, but nothing work.
If you only looking for only table header it can be achieved by using TableSection with a Title :
<TableView>
<TableRoot>
<TableSection Title="Keyboards">
<EntryCell Label="Deault" Placeholder="default" />
<EntryCell Label="Chat" Placeholder="omg brb ttyl gtg lol" Keyboard="Chat" />
<EntryCell Label="Email" Placeholder="sales#xamarin.com" Keyboard="Email" />
<EntryCell Label="Numberic" Placeholder="55" Keyboard="Numeric" />
<EntryCell Label="Telephone" Placeholder="+1 012 345 6789" Keyboard="Telephone" />
<EntryCell Label="Text" Placeholder="text" Keyboard="Text" />
<EntryCell Label="Url" Placeholder="http://developer.xamarin.com" Keyboard="Url" />
</TableSection>.
<TableSection Title="States & Colors">
<EntryCell Label="Colorful" Placeholder="text" LabelColor="Red" />
<EntryCell Label="Disabled" Placeholder="text" IsEnabled="false" />
<EntryCell Label="Colorful + Disabled" Placeholder="text" IsEnabled="false" LabelColor="Red" />
</TableSection>
</TableRoot>
</TableView>
Result:
OR
If you are looking for both header/footer for every section, you can listview with header and footer wrapped in a view cell inside of every table section.
Source: Xamarin TableView Samples
You can try to use a ListViewRenderer, in this renderer change the native control to a new grouped style UITableView with the same Source:
public class MyListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
if (Element != null)
{
var groupTable = new UITableView(Control.Frame, UITableViewStyle.Grouped);
groupTable.Source = Control.Source;
// Create a new UIRefreshControl for this tableView, then fire the command when it begin refreshing
var refreshControl = new UIRefreshControl();
groupTable.RefreshControl = refreshControl;
refreshControl.AddTarget((sender, args) =>
{
ListView listView = Element;
listView.RefreshCommand.Execute(null);
}, UIControlEvent.ValueChanged);
SetNativeControl(groupTable);
}
}
}
The RefreshCommand is defined in PCL, when the task completed we would set the property IsRefreshing to false to stop the refreshing. So we can capture this in renderer like:
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (Element.IsRefreshing == false)
{
Control.RefreshControl.EndRefreshing();
}
}
I'm newbie when it comes to xamarin, also in XAML, I just want to ask how to add a padding inside my viewcell below is my code
<TableView>
<TableRoot>
<TableSection Title = "Basic information">
<EntryCell Label = "First name: " Placeholder = "Required" />
<EntryCell Label = "Middel name: " Placeholder = "Optional" />
<EntryCell Label = "Last name: " Placeholder = "Required" />
<ViewCell>
<Picker x:Name="genderPicker" Title = "Select gender"></Picker>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
what i want is to add a little bit padding inside of this code.
![<ViewCell>
<Picker x:Name="genderPicker" Title = "Select gender"></Picker>
</ViewCell>][1]
This is what it looks like, so i just want to add some left and right space on my picker view.
http://i.stack.imgur.com/89qt9.png
Something like this should works fine:
<Picker x:Name="genderPicker"
Title = "Select gender"
Padding="left, top, right, bottom">
</Picker>
With left,top,right and bottom the value you would like. More information here
Add a StackLayout, or any other Layout subtype that supports padding, inside your ViewCell. You can then use the Layout properties to adjust the Picker.
<ViewCell>
<StackLayout Padding="10,0,0,0" HorizontalOptions="FillAndExpand">
<Picker HorizontalOptions="CenterAndExpand" >
<Picker.Items>
<x:String>Disabled</x:String>
<x:String>5 minutes</x:String>
</Picker.Items>
<Picker.SelectedIndex>0</Picker.SelectedIndex>
</Picker>
</StackLayout>
</ViewCell>
Unlike CSS or Android Views where you can tweak the controls themselves, you'll handle most of your padding using parent Layouts when working in Xamarin.Forms.
This is my XAML View (some code omitted for readability):<Window ... xmlns:c="http://www.caliburnproject.org">
<Button Content="Close without saving" c:Message.Attach="Close(false)" />
<Button Content="Save and Close" c:Message.Attach="Close(true)" />
</Window>
And here's the code in the ViewModel:
public void Close(bool save)
{
if (save)
{
// save the data
}
TryClose();
}
This doesn't work - of course - because the action parameters "true" and "false" aren't objects or object properties in the XAML. How can I make this work, and send a boolean as an Action parameter in Caliburn Micro?
If you put single quotes around the parameter name, it will properly convert for you.
<Button Content="Close without saving"
c:Message.Attach="Close('false')" />
<Button Content="Save and Close"
c:Message.Attach="Close('true')" />
You can try to use interactivity + triggers:
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cl:ActionMessage MethodName="MyMethod" >
<cl:Parameter Value="True">
</cl:Parameter>
</cl:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
I would like to handle the Checked and Unchecked events of a Checkbox control and execute a command in my ViewModel. I wired up an EventTrigger for both the Checked and Unchecked events as follows:
<CheckBox x:Name="chkIsExtendedHr" IsChecked="{Binding Schedule.Is24Hour, Mode=TwoWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<GalaSoft_MvvmLight_Command:EventToCommand
CommandParameter="{Binding IsChecked, ElementName=chkIsExtendedHr}"
Command="{Binding Path=SetCloseTime, Mode=OneWay}" />
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<GalaSoft_MvvmLight_Command:EventToCommand
CommandParameter="{Binding IsChecked, ElementName=chkIsExtendedHr}"
Command="{Binding Path=SetCloseTime, Mode=OneWay}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
I defined a RelayCommand in my ViewModel and wired up an action for it:
public RelayCommand<Boolean> SetCloseTime{ get; private set; }
...
SetCloseTime= new RelayCommand<bool>(ExecuteSetCloseTime);
The parameter in the action for the command always resolves to the previous state of the CheckBox, e.g. false when the CheckBox is checked, and true when the CheckBox is unchecked.
void ExecuteSetCloseTime(bool isChecked)
{
if (isChecked)
{
// do something
}
}
Is this expected behavior?
I have a workaround where I have separate triggers (and commands) for the Checked and Unchecked and use a RelayCommand instead of RelayCommand<bool>. Each command executes correctly when the CheckBox is checked and unchecked. Feels a little dirty though - even dirtier than having UI code in my ViewModel :)
Thanks
I think using "Click" event instead of "Checked" or "UnChecked" can solve this problem with just one command and no additional code.
In XAML it will look like,
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand CommandParameter="{Binding IsChecked, ElementName=chkIsExtendedHr}" Command="{Binding Path=SetCloseTime, Mode=OneWay}" />
</i:EventTrigger>
now rest of you code should work the you wanted,
thanks,
Why don't you handle your actions in your Schedule.Is24Hour. In setter you always can see when that property is changed.
i do this for checking checkbox
for view
<CheckBox Margin="126,0,0,0" IsChecked="{Binding UseNOCODE, Mode=TwoWay}" Content="Reply Messages ?" />
for the modelview
private bool _useNOCODE = false;
public bool UseNOCODE
{
get
{
return _useNOCODE;
}
set
{
if (_useNOCODE == value)
{
return;
}
_useNOCODE = value;
RaisePropertyChanged("UseNOCODE");
UseNoCodeChecked();
}
}
private void UseNoCodeChecked()
{//check the properties and what you like}