I have an editor in a grid at the bottom of a page with auto expands.
However, as it is at the bottom of the page, it expands beyond the bottom of the page.
Is there any way to make it expand upwards like WhatsApp does?
The editor is pretty standard.
<Editor AutoSize=”TextChanged” IsVisible="true" x:Name="Editor" Placeholder="Type a message..." /<
Thank you!
In your case, I think what you need to do is to play with the Grid.RowSpan property of your Editor.
For example, if the editor is located on the 3nd row (set at Grid.Row="2") and you want it to expand on top of the 2nd row, you can do something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
...
<Editor Grid.Row="2"
Grid.RowSpan="2"
VerticalOptions="End"
... />
</Grid>
The Grid.RowSpan allows you to expand the element to the row below.
You can see more here: https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.grid.rowspanproperty?view=xamarin-forms
I hope it helped 😉
Related
Now I'm working on updating the UI of my app(XF for Android). I found this UI solution for appbar(from source code Evolve 2016):
It looks beautiful and is implemented simply:
<ContentPage.Content>
<Grid RowSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout BackgroundColor={StaticResource Primary}, Grid.Row=0/>
<SearchBar/>
</StackLayout>
<StackLayout Grid.Row=1>
//other content
</StackLayout>
.....
For existing navigation(Master-Detail) it works fine. But I click by item (on this page) - than open new page(no Master Detail). Work like this:
await Navigation.PushAsync(new SessionDetailPage(), true);
I click back on toolbar - return to Session page than I get a white line display for a short time
it does not last long, a split second. then the white line disappears. But it's unpleasant to use.
Any ideas? How can I improve this?
Might be RowDefinition Height="Auto" calculating and resizing itself, try use absolute value to check if this is the cause.
I want to add social icons in the footer of my mobile application (Facebook, Youtube, Twitter, Whatsapp). I'm using xamarin cross platform to build my application.
A mobile app doesn't really have a footer of sorts, and putting social icons in it seems more like a thing you would do on a website to me. However, it is fairly easy to create an element that is always at the bottom of the page. You could use a StackLayout with VerticalOptions set to EndAndExpand which will vertically put it at the bottom or you could create a Grid structure to ensure the content is always at the bottom.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
// Normal content
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Text="Twitter" />
<Button Grid.Column="1" Text="Facebook" />
</Grid>
</Grid>
I want to have some interactive item I can click and fire event within header of ExpanderView. This is a normal behavior for item, but I cannot get it working in header.
In my case I have Image with MouseLeftButtonDown
Any ideas ?
Thanks,
Michal
You can change the look and content of the header by changing the HeaderTemplate of the ExpanderView. The HeaderTemplate takes a DataTemplate which can take any controls you which to place.
<toolkit:ExpanderView>
<toolkit:ExpanderView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}"/>
<Button Content="Click Me!" Grid.Column="1"
<!-- Use click event to handle within code behind -->
Click="OnHeaderBuittonclick"
<!-- Use command to handle within view model -->
Command="{Binding DoSomethingCommand}"
/>
</Grid>
</DataTemplate>
</toolkit:ExpanderView.HeaderTemplate>
</toolkit:ExpanderView>
I'm currently trying to use Telerik's RadSlideView to display my images. I've followed the code in http://www.telerik.com/help/windows-phone/radslideview-gettingstarted.html and they work perfectly well, but on the other hand I'd like to bind to real objects (with a variety of properties) and not just string arrays.
My main reason for wanting to do this is to allow the RadSlideView to show more than just images. I'd like to have descriptions, and other stuff! (which all belong to a specific object) I know this question might be kinda obscure, but if you could give me any ideas, it'd help me a long way :) cheers.
In the page you linked there's a sample with "complex" databinding, look at the ItemTemplate property where there's the image with a description :
<telerikPrimitives:RadSlideView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
<Image Source="{Binding ImagePath}" Stretch="None" Grid.Row="1" Margin="0,12,0,0"/>
</Grid>
</DataTemplate>
</telerikPrimitives:RadSlideView.ItemTemplate>
Is it not what you want ?
<listbox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Width="480" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border
Height="105"
Width="110"
BorderBrush="White"
Grid.Column="0"
BorderThickness="2">
<Image
delay:LowProfileImageLoader.UriSource="{Binding Path=Avatar}"
Source="/Image/default-thumb-groups.png">
</Image>
</Border>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="4"/>
<RowDefinition Height="35"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Text="{Binding Path=Name,Mode=TwoWay}"
Grid.Column="1"
Grid.Row="1"
FontFamily="Segoe WP Light"
FontSize="26"
Foreground="{StaticResource PhoneForegroundBrush}"
TextWrapping="Wrap">
</TextBlock>
<TextBlock
Text="{Binding Path=Members,Mode=TwoWay}"
Grid.Column="2"
Grid.Row="2"
FontFamily="Segoe WP Light"
HorizontalAlignment="Left"
FontSize="20" Opacity="0.91"
Foreground="{StaticResource PhoneForegroundBrush}"
TextWrapping="Wrap">
</TextBlock>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu
Name="DeleteGroup"
IsZoomEnabled="False"
Tag="{Binding Nid,Mode=TwoWay}"
Visibility="{Binding ElementName=GroupList, Path=DataContext.DeleteStatus,Mode=TwoWay, Converter=
{StaticResource booleanToVisibility}}" Opened="DeleteGroup_Opened" Closed="DeleteGroup_Opened">
<toolkit:MenuItem Header="delete group">
<Interactivity:Interaction.Triggers>
<Interactivity:EventTrigger EventName="Click">
<Command:EventToCommand Command="{Binding ElementName=GroupList,
Path=DataContext.DeleteCommand,Mode=TwoWay}" CommandParameter="{Binding
ElementName=DeleteGroup}" PassEventArgsToCommand="True"/>
</Interactivity:EventTrigger>
</Interactivity:Interaction.Triggers>
</toolkit:MenuItem>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
While trying for cleanup ; The Trigger of Context menu is not Detaching ; Because of this that page is not Dying even after navigating back from the page. This causing Saviour memory issue in our page. Please help me to resolve this Issue
Never worked with the Toolkit ContextMenu, but noticed that you are not the only one having similar problem. For example this article proves that "the ContextMenu control attaches itself to the RootVisual via mouse event handlers and therefore never gets GC'ed; even worse, the visual tree it is placed in is kept alive as well". Even if that article talks about the desktop, the symptoms are probably the same on WP7.
I would try to create/destroy menu programatically. This article demonstrates the techniques that can be used.
Another possibility would be to customize the listbox:
Override PrepareContainerForItemOverride: Call base.PrepareContainerForItemOverride() to get the standard ListBoxItem and add ContextMenu to it manually.
Override ClearContainerForItemOverride to clear the menu reference.
(Never tried that, but it should work.)
A side remark
Your Xaml seems to be overcomplicated to me. If nothing else, then using nested grids within ListBoxItem (which in turn is embedded into ListBox panel (VirtualizingStackPanel), which is in at least one more panel on the page level) must have terrible perf impact.
Even if I forget that the internal 4x2 grid uses 2 cells only (perhaps you simplified presented Xaml), what's the purpose of the outer grid? The same effect can be achieved by using a single grid and column span over the first column.