If I want to move a button up the screen the same distance as the height of another control on the page I can do this:
this.myControl.TranslateTo(20, - this.myOtherControl.Height);
Is there a way to do this in XAML?
Is your situation like the screenshot below?
Do you want to achieve it like this screenshot?
You could used TranslationY="{ Binding Path=TranslationY ,Source={x:Reference btn1}}" to achieve that.
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<StackLayout Orientation="Horizontal" HeightRequest="100" Padding="20,0,0,0">
<Button x:Name="btn1" Text="Aqua" HeightRequest="60" WidthRequest="50" TranslationY="23" />
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="100" Padding="20,0,0,0">
<Button HeightRequest="60" WidthRequest="50" Text="llll" TranslationY="{ Binding Path=TranslationY ,Source={x:Reference btn1}}"/>
</StackLayout>
</StackLayout>
Related
How do i add logo to center of the Xaml Form, i am starting out Xamarin.
My xaml code looks something like this :
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
<Entry Placeholder="Mail id"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button> </StackLayout>
</ContentPage>
This works fine, Now i want to see where i can add the logo to the Xaml form, Its cross platform.
I am new to this.
Edit
Trying out something like this
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
VerticalOptions="Center" Padding="10">
<Image Source="screenimg2.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
<Entry Placeholder="Mail id"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button>
</StackLayout>
You can use an AbsoluteLayout to contain your "background" logo and then the StackLayout, both centered on screen and then place your UI widgets inside the StackLayout to control the order of their placement:
Example (Logo is set to a 25% opacity):
<AbsoluteLayout BackgroundColor="Black">
<Image Source="logo.png" AbsoluteLayout.LayoutBounds=".5,.5,.75,.75" AbsoluteLayout.LayoutFlags="All" Opacity=".25" />
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Label Text="INTRO TO THE WORLD" TextColor="Green" />
<Entry Text="Some Entry Text" BackgroundColor="Green" />
</StackLayout>
</AbsoluteLayout>
re: Xamarin.Forms AbsoluteLayout
I want to make a custom dropdown as below.
once user clicked on the frame I need to make a dropdown as below by expanding frame height.
<Frame CornerRadius="8" BackgroundColor="{StaticResource LightAirColor}" Padding="10,4,10,4">
<TableView>
<TableSection>
<ViewCell Tapped="OnSortingPaneTapped">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Label Text="Arrange By" TextColor="{StaticResource DarkColor}" FontSize="{DynamicResource FontSize16}"/>
<Label Text="Date/Time" TextColor="{StaticResource NavigationPrimary}" FontSize="{DynamicResource FontSize16}"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Episode" TextColor="{StaticResource NavigationPrimary}" FontSize="{DynamicResource FontSize16}"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped = "SortJournalByDate">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Date/Time" TextColor="{StaticResource NavigationPrimary}" FontSize="{DynamicResource FontSize16}"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableView>
</Frame>
I tried using heightRequest, forceLayout() but no luck. How can I change the height from code behind when the user click on the frame?
you can use binding for your height request and change it in the view model.
also you can use syncfusion combo box to reach that purpose.
another thing if you couldnt change height you can use visible to invisible it
I have a listview. This list view has 5 rows with two buttons namely A & B. When I tap on button A on a row, I want to change the image on A as well as B on the same row and vice-versa. I am able to individually tap and change the image on the same button but don't know how to change the image on the other button. Here is my listview:
<ListView x:Name="GroupedView" SeparatorColor="Transparent" GroupDisplayBinding="{Binding Title}" IsGroupingEnabled="true" HasUnevenRows="true" >
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="#E2F5F9">
<Label Text="{Binding Title}" TextColor="{StaticResource NavyBlue}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Spacing="2" Padding="5">
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="{Binding QuestionName}" />
</StackLayout>
<StackLayout IsVisible="{Binding ShowYesNo}" Spacing="15" Orientation="Horizontal" HorizontalOptions="End">
<Button ClassId="Yes" Clicked="ChoiceSelected" CommandParameter="{Binding question_id}" Image="{Binding YesChoiceImg}" />
<Button ClassId="No" Clicked="ChoiceSelected" CommandParameter="{Binding question_id}" Image="{Binding NoChoiceImg}" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am then using the sender to identify the class ID and change the image of the button.
Should I be using a command? Should I be doing something else? Please help. Thanks
If you want to use the CommandParameter you should be using a Command. At the moment you're mixing 2 different ways to handle the click.
One thing to note though is that if you use a command you usually want to bind it to a Command that is defined on your ViewModel but since inside the DataTemplate your BindingContext is the ListView item instead of the ViewModel so you have to reference around that. Something like this should work:
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Spacing="2" Padding="5">
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="{Binding QuestionName}" />
</StackLayout>
<StackLayout IsVisible="{Binding ShowYesNo}" Spacing="15" Orientation="Horizontal" HorizontalOptions="End">
<Button ClassId="Yes" Command="{Binding Path=BindingContext.ButtonCommand, Source={x:Reference MyQuestionPage}}" CommandParameter="{Binding .} Image="{Binding YesChoiceImg}" />
<Button ClassId="No" Clicked="ChoiceSelected" CommandParameter="{Binding question_id}" Image="{Binding NoChoiceImg}" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
Note here that you have to give your ContentPage an x:Name (so you can reference it and call the BindingContext on it). And the "{Binding .}" binds to the current list item. So no need to search for it on id you can just plug it into the command directly!
I don't know why, but when I tap any ListView item, the Button inside it's template loses the background color.
I use default ViewCell inside ListView. Is this a Xamarin.Forms bug?
I have this problem only on iOS.
<ListView x:Name="lv" Grid.Row="2" HasUnevenRows="true" BackgroundColor="White" ItemTapped="OnItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="16" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="{Binding .,Converter={StaticResource IndexColorConverter}">
<StackLayout VerticalOptions="Center">
<Label Text="{Binding Auditorium}" FontSize="18" TextColor="Black"/>
<ContentView Padding="0,-5,0,0">
<Label Text="{Binding Title}" FontSize="16" TextColor="Black"/>
</ContentView>
<StackLayout Orientation="Horizontal">
<Button WidthRequest="100" Text="{Binding ButtonOverviewText}" TextColor="White" BackgroundColor="{Binding ButtonColor}" CommandParameter="{Binding .}" Clicked="Handle_Clicked"/>
<Button WidthRequest="100" Text="{Binding ButtonOverviewText}" TextColor="White" BackgroundColor="{Binding ButtonColor}" CommandParameter="{Binding .}" Clicked="Handle_Clicked" />
</StackLayout>
</StackLayout>
<Label Text="{Binding Coordinator}" FontSize="14" TextColor="Gray"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
There was an old issue that I filed fora similar bug: https://bugzilla.xamarin.com/show_bug.cgi?id=27502.
However, the specific scenario you mention is expected behavior on iOS and happens in native (non-Xamarin.Forms) projects too. See the comment here. You might consider disabling the UITableViewCellSelectionStyle of your cells with UITableViewCellSelectionStyle.None. Here is an example of a cell renderer. You can set the cell.SelectionStyle here. This would stop the gray highlight of the cell. If you don't want that it could be a workaround to keep your button colors.
My workaround for this problem is the following.
<Grid>
<BoxView BackgroundColor="{Binding ButtonColor}"/>
<Button Text="{Binding ButtonOverviewText}" TextColor="White" BackgroundColor="Transparent" CommandParameter="{Binding .}" Clicked="Handle_Clicked"/>
</Grid>
<ListView x:Name="ListNewsLetter" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" SeparatorVisibility="Default" VerticalOptions="Fill" ItemTapped="ListNewsLetter_ItemTapped" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout HorizontalOptions="Fill" VerticalOptions="Center" Padding="5">
<StackLayout Padding="1" BackgroundColor="#f15a23" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout x:Name="stkNewsLetter" VerticalOptions="Center" BackgroundColor="#f15a23" Orientation="Horizontal" HeightRequest="30" Padding="6,0,6,0">
<Label x:Name="lblName" Text="{Binding NewsHeadline}" HorizontalOptions="StartAndExpand" TextColor="White" VerticalTextAlignment="Center" FontSize="Small"/>
<Image x:Name="imgPlus_Minus" HeightRequest="20" WidthRequest="20" Source="ico_down_arrow2_right.png" HorizontalOptions="End" ClassId="{Binding TapId}">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="img_Tapped" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout x:Name="stkNewsLetterDetail" Orientation="Vertical" BackgroundColor="#ffffff" IsVisible="true" HorizontalOptions="FillAndExpand" Padding="6,0,6,0">
<Label x:Name="lblDate" Text="{Binding NewsDate}" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Start" TextColor="#585858" FontSize="Small"/>
<Label x:Name="lblDetail" Text="{Binding NewsDetails}" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Start" TextColor="#585858" FontSize="Small"/>
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
As you see in code ListView having main two child named "stkNewsLetter" and "stkNewLetterDetail". First Stack having Image and I want to change visibility of second stack on Image tap event.
In windows phone It will possible to get UI elements of List view but In xamarin.forms how it is possible?
You should bind to the Visability property on the stackLayout in the same way you are binding the Text. If the stackLayout doesn't have a visibility property you may need to wrap it within another control that does.
The click should change a visibility property in you viewmodel which will get picked up by the binding mentioned above.
For those who came here to get the child elements through Name like me,here is the solution:
var selectedItem = //any item selected within listview through OnItemTapped
StackLayout child1 = selectedItem.FindByName<StackLayout>("stkNewsLetter");