<Grid x:Name="LayoutRoot">
<StackPanel
Margin="30, 30, 10, 0"
HorizontalAlignment="Left">
<ComboBox
x:Name="FacultyComboBox"
Width="210"
Header="Факультет:"
HeaderTemplate="{ThemeResource ComboboxHeaderTemplate}"
ItemsSource="{Binding Timetable[0].Faculties, Converter={StaticResource FacultyListToStringListConverter}}"
SelectedIndex="{Binding Timetable[0].SelectedFaculty, Mode=TwoWay}"
PlaceholderText="Выберите факультет"/>
<ComboBox
x:Name="GroupComboBox"
Header="Группа:"
HeaderTemplate="{ThemeResource ComboboxHeaderTemplate}"
ItemsSource="{Binding Timetable[0].CurrentGroups}"
SelectedIndex="{Binding Timetable[0].SelectedGroup, Mode=TwoWay}"
PlaceholderText="Выберите группу"/>
<TextBlock Text="{Binding Timetable[0].SelectedGroup}" FontSize="20"></TextBlock>
</StackPanel>
</Grid>
When I add SelectedIndex="{Binding Timetable[0].SelectedGroup, Mode=TwoWay}" the error appears. w/o this line everything is ok, but I very need this line.
Well, I found the solution. The point was that u can't bind several elements to same Data Source just like that, but u need to set the DataContext parameter at a parent element, so u could bind to certain fields of same Data Source.
Hope, this will help somebody like me.
Related
I'm trying to implement a CarouselView to display a set of images on my app. Apparently, I can't remove the Whitespace at the Bottom of the CarouselView no matter what combinations I tried.
I've placed BackgroundColor property for CarouselView [Red], Grid[Green] (inside DataTemplate), and IndicatorView [Blue] to see which of them is consuming the rest of the screen despite the lack of StackLayout and it seems that either CarouselView or Grid is causing the unwanted behaviour.
Here's my XAML Code with roughly nothing on the ViewModel but a Mock Database for the Image Collection:
<ContentPage.Content>
<Grid ColumnDefinitions="*"
RowDefinitions="Auto,Auto,Auto,1*">
<Label Grid.Row="0" Grid.Column="0"
Text="CarouselView Test"
TextColor="Black"
FontAttributes="Bold"
FontSize="20"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Padding="10" />
<CarouselView Grid.Row="1" Grid.Column="0" BackgroundColor="Red" HeightRequest="{Binding ScreenWidth}"
x:Name="TheCarousel"
ItemsSource="{Binding ImageSourceCollection}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto" ColumnDefinitions="Auto" BackgroundColor="Green" HorizontalOptions="Center" VerticalOptions="Center">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding .}" />
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView Grid.Row="2" Grid.Column="0" BackgroundColor="Blue"
x:Name="indicatorView"
IndicatorColor="LightGray"
IndicatorSize="10"
SelectedIndicatorColor="Black" />
</Grid>
</ContentPage.Content>
And here's a screenshot of my current build with the CarouselView/Grid consuming most of the Screen Space:
CarouselView has some weird behaviors on size calculating,in your scenario the only way is get the height it(template) needs in code(viewmodel), and bind it to the HeightRequest on CarouselView .
Xaml
<CarouselView HeightRequest="{Binding xxx}"
View model
public double xxx {
get
{
// calculate the height according to the width by ratio
return height;
}
}
I think you need to set Space between rows and columns to Zero if you want to make your indicatorView stick to your CarouselView
So what actually worked for me.
I set Grid Row Definition to ex.(300) and then Carousel Height Request to 350.
I'm setting Image Width based on Screen Width, but I tried it Manually ex (400) and still worked, don't get confused.
<Grid RowDefinitions="300">
<CarouselView x:Name="carouselView"
Grid.Row="0"
ItemsSource="{Binding HomeCarousel}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="False"
CornerRadius="0"
Margin="0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
HeightRequest="350">
<SwipeView>
<Image Source="{Binding ImageSource}"
Aspect="AspectFill"
WidthRequest="{DynamicResource FullScreenWidth}"
HorizontalOptions="Center" />
</SwipeView>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Grid>
I am trying to place a synfcusion button that has a calendar image near a xarmain forms entry box.
But its a bit out of alignment what I have tried so far is.
<Label Text="Please select a start date below"></Label>
<StackLayout Orientation="Horizontal">
<Entry x:Name="txtDateStartEntry" WidthRequest="200" ></Entry>
<syncfusion:SfButton x:Name="btnPickStartDate" CornerRadius="10" HorizontalTextAlignment="Start" ShowIcon="True" Clicked="btnPickStartDate_Clicked" FontSize="24" BorderThickness="2" TextColor="White" BackgroundColor="White" Text="..." >
<syncfusion:SfButton.Content>
<Grid ColumnDefinitions="Auto, *, Auto" ColumnSpacing="16" Padding="16">
<Image Grid.Column="1" HorizontalOptions="End" WidthRequest="30" HeightRequest="30" Source="cal16.png" VerticalOptions="End"/>
</Grid>
</syncfusion:SfButton.Content>
</syncfusion:SfButton>
</StackLayout>
What I have eneded up with is this.
As you can see its a bit far away from the entry field and doesnt look like it belongs.
If you're using Syncfusion, you should make use of SfTextInputLayout which provides leading/trailing view functionality for the express purpose of adding descriptive iconography to an input view.
Code example assumes importing the following xmlns:
xmlns:sftl="clr-namespace:Syncfusion.XForms.TextInputLayout;assembly=Syncfusion.Core.XForms"
<sftl:SfTextInputLayout TrailingViewPosition="Inside">
<Entry x:Name="txtDateStartEntry" WidthRequest="200" />
<sftl:SfTextInputLayout.TrailingView>
<Image HeightRequest="30" Source="cal16.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="btnPickStartDate_Clicked" />
</Image.GestureRecognizers>
</Image>
<sftl:SfTextInputLayout.TrailingView>
</sftl:SfTextInputLayout>
Note: when using LeadingView or TrailingView, it's recommended to not assign a Width value as Syncfusion will calculate the width based on the height you request to maintain aspect ratio of the specified view. Therefore I have intentionally excluded HeightRequest from the Image.
I need to bind grouped data collection to a FlexLayout, like in CollectionView which has 'IsGrouped' property. Is there anything like that in FlexLayout? Currently, I can bind non-grouped collection of data using BindableLayout as like below
<FlexLayout BindableLayout.ItemsSource="{Binding DataList}"
Wrap="Wrap"
JustifyContent="Start"
AlignItems="Start"
AlignContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame WidthRequest="154" Padding="0" CornerRadius="10" HasShadow="True">
<StackLayout Orientation="Vertical" Padding="10" HorizontalOptions="FillAndExpand">
<Image Source="{Binding Image}" WidthRequest="130" HeightRequest="130" HorizontalOptions="Center"/>
<Label Text="{Binding Title}" FontFamily="RobotoMedium" TextColor="#001B48" FontSize="8"></Label>
</StackLayout>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
The reason for choosing FlexLayout is the necessity of making my app looks good in landscape mode too while listing out the data. Now I need to list out grouped collection of data in same way.
Option 1
In your case if you want to display data collection with group , you could use ListView(or CollectionView) and set the ViewCell with BindableLayout .
Sample code
<ListView //...>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<FlexLayout BindableLayout.ItemsSource="{Binding DataList}"
Wrap="Wrap"
JustifyContent="Start"
AlignItems="Start"
AlignContent="Start">
//...
</FlexLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView >
Here is a similar issue that you can have a refer .
Option 2
If you don't want to use ListView , you can also set the BindableLayout in the DataTemplate of another BindableLayout . Make sure that you set the correct path of ItemsSource .
I'm trying to embed an editor in a Xamarin.Forms.DataGrid cell using following code (inspired from this sample)
<ContentPage.Content>
<StackLayout>
<dg:DataGrid ItemsSource="{Binding Items}" SelectionEnabled="True" SelectedItem="{Binding SelectedItem}"
RowHeight="70" HeaderHeight="50" PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}">
<dg:DataGrid.Columns>
<dg:DataGridColumn Title="Col. 1" PropertyName="Prop. 1" Width="0.7*">
<dg:DataGridColumn.CellTemplate>
<DataTemplate>
<Entry Text="{Binding}" />
</DataTemplate>
</dg:DataGridColumn.CellTemplate>
</dg:DataGridColumn>
</dg:DataGrid.Columns>
</dg:DataGrid>
</StackLayout>
</ContentPage.Content>
Now that works ok, but the edited text is aligned top-left of the cell. So I go trying to use one of the following alignment parameters:
HorizontalOptions="Center" VerticalOptions="Center"
<!-- or >
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
But in both cases, I end up with text centered within the cell, but now, the editor doesn't expand (it seems as if I had padding)... And the result with either Centeror CenterAndExpand is actually the same:
Could anyone help me get the desired result ?
EDIT: updated with full grid's definition
BONUS question: how to get rid of the editor's border?
You can try this:
<Entry Text="{Binding}" HorizontalTextAlignment="Center" />
Bonus answer: To get rid of border you need custom renderers.
I can use Interaction.Triggers to catch the textchanged event on a textbox like so:
<TextBox Text="{Binding Title}" Style="{StaticResource GridEditStyle}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cmd:EventToCommand Command="{Binding TextChanged}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
However when I use it in a datatemplate for a listview celltemplate as follows:
<ListView ItemsSource="{Binding LangaugeCollection}" SelectedItem="{Binding SelectedLangauge}" BorderThickness="0" FontFamily="Calibri" FontSize="11">
<ListView.View>
<GridView>
<GridViewColumn Width="200">
<GridViewColumn.CellTemplate>
<DataTemplate >
<Grid>
<TextBlock Text="{Binding Title}" Style="{StaticResource GridBlockStyle}">
</TextBlock>
<TextBox Text="{Binding Title}" Style="{StaticResource GridEditStyle}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cmd:EventToCommand Command="{Binding TextChanged}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
the event will not trigger.
Does anyone know why this does not trigger and how to fix it?
When you are in a DataTemplate, the DataContext might not be what you expect. Typically the DataContext in a DataTemplate is set to the item that the DataTemplate represents. If your TextChanged command is on the "main viewmodel" instead of the data item, you need to be more precise in the way that you specify the data binding, for example:
Command="{Binding Source={StaticResource Locator}, Path=Main.TextChanged}"
You can see the issue when you run the code in debug mode (F5) in Studio and observe the Output window. A Data Error will be shown if the DataContext is incorrectly set.
Cheers,
Laurent
It seems something handles the event before the TextBox. Maybe you could listen to Title property (collection) changed inside you ViewModel, because anyway you are calling TextChanged on ViewModel inside the trigger, I suppose.
Btw I think you're missing TwoWay mode in your binding expression.
Hope this helps.