I have a login page and my code is this:
<ContentPage.Content>
<Grid>
<StackLayout Orientation="Vertical" Padding="20">
<Entry Placeholder="{x:Static resources:AppResources.EMB_PLACEHOLDER}" Keyboard="Numeric" Text="{Binding EMB}"></Entry>
<Button Text="{x:Static resources:AppResources.LOGIN_BTN}" TextColor="White" Padding="0,-20" BackgroundColor="#07987f" Command="{Binding LoadLoginCommand}"></Button>
<Label
Margin="0,10,0,0" >
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static resources:AppResources.MESSAGE} "></Span>
</FormattedString>
</Label.FormattedText>
</Label>
<Grid Margin="0,10,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Padding="20,0,0,0" Text="{x:Static resources:AppResources.LBLLANGUAGE}" VerticalOptions="Center" FontSize="Body" TextColor="Gray" Grid.Column="0"/>
<Picker x:Name="languagePicker" Grid.Column="1" ItemsSource="{Binding Languages}" Title="{x:Static resources:AppResources.LBLLANGUAGE}" ItemDisplayBinding="{Binding Name}" SelectedItem="{Binding SelectedLanguage, Mode=TwoWay}"></Picker>
</Grid>
</StackLayout>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<ActivityIndicator IsVisible="{Binding IsBusy}" IsRunning="{Binding IsBusy}" HorizontalOptions="Center" VerticalOptions="Center"></ActivityIndicator>
<Label Text="{x:Static resources:AppResources.TSMSG1}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="{Binding IsBusy}"/>
</StackLayout>
</Grid>
</ContentPage.Content>
Have a picker with list of languages. Also have resx file for every language. My scenario is when i click on picker and select some language i want to change the language of all text on the login page in choosed language in realtime. Any idea how to do it?
The first link provided in the comments is an awesome solution, however for the shake of simplicity, a very simple way of doing what you want is to bind the control's text to properties in the ViewModel:
<Label Text="{Binding TSMSG1}"...
rather than using
<Label Text="{x:Static resources:AppResources.TSMSG1}"...
Then in your ViewModel you would have a property TSMSG1 (and others) that you manually update when the language changes. Of course those properties need to follow INPC pattern for the changes to be reflected on the view.
I would not recommend doing this everywhere because bindings are expensive for your app performance, but it should be fine for the screen that changes the language.
Related
In MVC ASP.net Core, I used partials to re-use blocks of a page. In Xamarin, we have DataTemplates & ControlTemplates but I'm not sure how to best use them.
In one of my pages I have the following for the content:
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<Label Text="Welcome to data template selector" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<CollectionView ItemsSource="{Binding MainPageView.Fields}"
EmptyView="No fields for this screen."
ItemTemplate="{StaticResource templateSelector}"
SelectionChanged="CollectionView_SelectionChanged">
</CollectionView>
<StackLayout Margin="10,0,10,5" Orientation="Vertical">
<Button Command="{Binding MainPageView.SubmitCommand}" Text="Submit" />
<validator:ErrorSummaryView
IsVisible="{Binding MainPageView.ShowValidationSummary, Mode=OneWay}"
ErrorStateManager="{Binding MainPageView.ErrorStateManager, Mode=OneWay}"
Margin="0,0,0,5"/>
</StackLayout>
</StackLayout>
The template selector is (there will be more choices later):
<tempcel:FieldDataTemplateSelector
x:Key="templateSelector"
RadioTemplate="{StaticResource RadioTemplate}"
DropListTemplate="{StaticResource DropListTemplate}">
</tempcel:FieldDataTemplateSelector>
Where I could use some direction is right now 80% of what is in RadioTemplate and DropListTemplate are the same and I'd like to pull the shared code out so if I want to change the base layout, I only need to change one place. Here are the two DataTemplates:
<DataTemplate x:Key="DropListTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0">
<Label
Text="{Binding Name}"
Style="{StaticResource LabelStyle}">
</Label>
<ImageButton HorizontalOptions="Center"
CornerRadius="6"
VerticalOptions="Center"
Clicked="HelpButton_Clicked"
HeightRequest="12"
WidthRequest="12"
BorderColor="Black"
BackgroundColor="Black"
BorderWidth="1"
IsVisible="{Binding ShowHelpButton}">
<ImageButton.Source>
<FontImageSource FontFamily="FAFreeSolid"
Color="White"
Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
</ImageButton.Source>
</ImageButton>
</StackLayout>
<Label
Grid.Row="1"
Style="{StaticResource HelpStyle}"
Text="{Binding HelpTopic.Text}"
IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}">
</Label>
<Picker
Grid.Row="2"
IsEnabled="{Binding IsEnabled}"
Margin="10,2,10,0"
ItemsSource="{Binding Choices.Choices}"
SelectedItem="{Binding SelectedChoice}"
ItemDisplayBinding="{Binding Label}"
SelectedIndexChanged="Picker_SelectedIndexChanged">
</Picker>
<validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="RadioTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0">
<Label
Text="{Binding Name}"
Style="{StaticResource LabelStyle}">
</Label>
<ImageButton HorizontalOptions="Center"
CornerRadius="6"
VerticalOptions="Center"
Clicked="HelpButton_Clicked"
HeightRequest="12"
WidthRequest="12"
BorderColor="Black"
BackgroundColor="Black"
BorderWidth="1"
IsVisible="{Binding ShowHelpButton}">
<ImageButton.Source>
<FontImageSource FontFamily="FAFreeSolid"
Color="White"
Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
</ImageButton.Source>
</ImageButton>
</StackLayout>
<Label
Grid.Row="1"
Style="{StaticResource HelpStyle}"
Text="{Binding HelpTopic.Text}"
IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}">
</Label>
<StackLayout
Grid.Row="2"
RadioButtonGroup.GroupName="{Binding Choices.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding Choices.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Spacing="50"
Margin="10,2,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
CheckedChanged="OnRadioChanged">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
</Grid>
</DataTemplate>
I haven't figured out enough about Xamarin to know if I need to change where I have the CollectionView to put something there that has the common layout information with a way to put the different editors in. Or, if there is a way to modify the DataTemplates to get their base layout from something else. I tried looking at ContentPresenter but couldn't figure out how it would fit in.
Thanks
I found there is very little difference between DropListTemplate and RadioTemplate. So you can also achieve this without DropListTemplate and RadioTemplate .
You can display and hide the two views (Picker and BindableLayout) based on the item data of the CollectionView 's ItemsSource.
The following are the difference in the two Templates:
<Picker
Grid.Row="2"
IsEnabled="{Binding IsEnabled}"
Margin="10,2,10,0"
ItemsSource="{Binding Choices.Choices}"
SelectedItem="{Binding SelectedChoice}"
ItemDisplayBinding="{Binding Label}"
SelectedIndexChanged="Picker_SelectedIndexChanged">
</Picker>
and
<StackLayout
Grid.Row="2"
RadioButtonGroup.GroupName="{Binding Choices.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding Choices.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Spacing="50"
Margin="10,2,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
CheckedChanged="OnRadioChanged">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
I am trying to place items in CollectionView horizentally in one row as each item should fill the screen width. However, in the current setup it doesn't fill width of the screen. What I am looking is one item at a time in the horizental direction.
<DataTemplate x:Key="UpdateRecentItemTemplate">
<ContentView BackgroundColor="Yellow" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<yummy:PancakeView Style="{StaticResource Pancake}" VerticalOptions="Center" HeightRequest="80" BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1">
<yummy:PancakeView.Shadow>
<yummy:DropShadow Color="{Binding BindingContext.FirstColor, Source={x:Reference MyPage}}" BlurRadius="1"></yummy:DropShadow>
</yummy:PancakeView.Shadow>
<yummy:PancakeView.BackgroundGradientStops>
<yummy:GradientStopCollection>
<yummy:GradientStop Color="{Binding BindingContext.FirstColor, Source={x:Reference MyPage}}" Offset="0" />
<yummy:GradientStop Color="{Binding BindingContext.SecondColor, Source={x:Reference MyPage}}" Offset="1" />
</yummy:GradientStopCollection>
</yummy:PancakeView.BackgroundGradientStops>
<StackLayout VerticalOptions="Center" BackgroundColor="Transparent">
<Label Grid.Row="0">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding ChapterID, StringFormat=' {0} '}" FontSize="Small"/>
<Span Text="{Binding ArabicEnglishName, StringFormat=' {0} '}" FontSize="Medium" FontAttributes="Bold"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="1">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding AyaNumber, StringFormat=' Ayat No. {0}'}" FontSize="Medium"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</yummy:PancakeView>
</ContentView>
[![<Grid HeightRequest="140" Padding="0" BackgroundColor="Red">
<CollectionView ItemsSource="{Binding Recents}"
VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" HorizontalOptions="FillAndExpand"
ItemTemplate="{StaticResource UpdateRecentItemTemplate}" x:Name="RecentView">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" HorizontalItemSpacing="5" Span="1" />
</CollectionView.ItemsLayout>
</CollectionView>
</Grid>
The easiest would be to use Carouselview instead of CollectionView. With Carouselview we can manage to show one item at a time horizentally. So changed CollectionView with Carouselview and it worked. Additionally, I had only 4 items to show one at a time, so in this case Carouselview is more approperiate then CollectionView.
I am using a stack layout as its the easiest with responsive but I am trying to get to items side by side I am trying to mimic running apps with speed and distance.
My Main question is how would one get the speed and distance to look similar to the design I can't get the spacing right in a stack layout
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WellbeingNinja.Views.BmiInfo">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" Spacing="0" Padding="0" VerticalOptions="StartAndExpand">
<Frame x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Distance"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame x:Name="frameTotalDistance" CornerRadius="7">
<StackLayout>
<Label x:Name="lbldistanceText" Text="Distance"></Label>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
I am trying to mimic this style here
use a Grid
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0" x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Distance"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lbldistanceText" Text="Distance"></Label>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
</Grid>
I have a xamarin forms app which has an editor and entry control below it inside a listview,
Whenever I type into the entry control the text appears in the editor control in spite of the cursor being in the entry control.
This issue occurs in Xiaomi Redmi Note4 device only, running on Android 7.0.
Xamarin Forms Version: 2.3.4.247
Xamarin.Android Version: 2.3.4.247
Is there a fix for such an issue? Thanks
This is the code:
<StackLayout Orientation="Vertical" Padding="0,10,0,10" >
<Label Text="{Binding TouchPointQuestionIDSync}" x:Name="lblYesNoWithTextField" IsVisible="False"/>
<Label Text="{Binding Question}" TextColor="Black" FontSize="17"/>
<StackLayout VerticalOptions="Start" Orientation="Vertical" BackgroundColor="Red" Padding="{Binding TemplateBorderValue}">
<Grid HeightRequest="30" BackgroundColor="#EEEEEE" Padding="5,10,5,10">
<Grid.RowDefinitions>
<RowDefinition Height="0.05*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding QuestionPaddingValue}"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="{Binding QuestionPaddingValue}"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblYes" Grid.Row="0" Grid.Column="0" TextColor="Black" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Text="{Binding Yes}" FontSize="14"/>
<ffimageloading:CachedImage x:Name="imgRadioYesWithTextField" Source="{Binding ImgRadioYesSrc, Mode=TwoWay}" Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" >
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_TappedYesWithTextField" Command="{Binding ParentBindingContext.cmdListRadioButtonYesTapped,Source={x:Reference dtYesNoTextFieldPage}}"
CommandParameter="{Binding .}"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<Label x:Name="lblNo" Grid.Row="0" Grid.Column="3" Text="{Binding No}" TextColor="Black" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" FontSize="14"/>
<ffimageloading:CachedImage x:Name="imgRadioNoWithTextField" Source="{Binding ImgRadioNoSrc, Mode=TwoWay}" Grid.Row="0" Grid.Column="4" HorizontalOptions="Start">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_TappedNoWithTextField" Command="{Binding ParentBindingContext.cmdListRadioButtonNoTapped,Source={x:Reference dtYesNoTextFieldPage}}"
CommandParameter="{Binding .}"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</Grid>
</StackLayout>
<StackLayout x:Name="stkEditorContainerWithTextField" IsVisible="{Binding bSetCommentBoxVisibility}" BackgroundColor="{Binding TemplateCommentBackground}" Padding="{Binding TemplateCommentBorderValue}">
<local1:CustomEditor VerticalOptions = "FillAndExpand" x:Name="CommentBoxWithTextField" Focused="CommentBox_FocusedWithTextField" Unfocused="CommentBox_UnfocusedWithTextField" TextColor="Black" HeightRequest="150" FontSize="Default" Keyboard="Default" Text="{Binding CommentBoxText, Mode=TwoWay}" IsEnabled="{Binding EnableControl}" />
</StackLayout>
<StackLayout IsVisible="{Binding bSetCommentBoxVisibility}" Padding="{Binding TemplatePaddingEstimateValue}" BackgroundColor="{Binding TemplateEstimateValueBackground}">
<local1:CustomEntry x:Name="lblEstimatedValue" Focused="txtUserWithTextField_Focused" Keyboard="Numeric" Unfocused="txtUserWithTextField_Unfocused" Placeholder="{Binding strEVPlaceHolder}" Text="{Binding ATFEntryText, Mode=TwoWay}" PlaceholderColor="Gray" TextColor="Black"/>
</StackLayout>
</StackLayout>
I am loaded the data in List view in my page. I am able to scroll the data in List view but at the time of scrolling not showing any scrollbar at vertical. Please suggest any idea, How can I set vertical scrollbar in List view.
Sample code:
<ListView BackgroundColor="Transparent" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
ItemsSource="{Binding DataList}" HeightRequest="{Binding DataListRowHeight}" HasUnevenRows="true" HorizontalOptions="CenterAndExpand" RowHeight="40" SeparatorColor="Transparent"
SelectedItem="null">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="OnItemClicked"/>
</Grid.GestureRecognizers>
<Label Text="{Binding WindowName}" Grid.Column="0" TextColor="Black" FontFamily="Avenir Book" HorizontalTextAlignment="Start" VerticalTextAlignment="Center">
</Label>
<StackLayout Orientation="Horizontal" Grid.Column= "1">
<Label Text="Curtain Type:" TextColor="Black" FontFamily="Avenir Book" FontAttributes="Bold" HorizontalTextAlignment="Start" VerticalTextAlignment="Center">
</Label>
<Label Text="{Binding Data}" TextColor="Black" FontFamily="Avenir Book" HorizontalTextAlignment="Start" VerticalTextAlignment="Center">
</Label>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Above is the second listview sample code.