I have an image in Telerik slideView control and a Button on the AppBar. When AppBar Button is tapped I change image source of the active Image. Everything works well but I need an Animation for changing image source. I'm using MVVMlight. Coul anybody help me with animation image appearance by tap on appBar button. Any information would be useful.
<telerikPrimitives:RadSlideView
x:Name="slideView"
ItemsSource="{Binding Covers}"
SelectedItem="{Binding CurrentCover ,Mode=TwoWay}"
ItemRealizationMode="ViewportItem" >
<telerikPrimitives:RadSlideView.ItemTemplate>
<DataTemplate>
<Image x:Name="DisplayImage" Source="{Binding FullCover}">/Image>
</DataTemplate>
</telerikPrimitives:RadSlideView.ItemTemplate>
Related
Is there a way to customize the "3-dot" button, that shows the Secondary ToolBarItem list in Xamarin.Forms UWP app?
It is possible to do so for iOS and Android, using the custom renderers. However, I was not able to locate the corresponding UIElement from the UWP custom renderer class.
Any ideas of how to access the button and change its appearance (particularly, change the icon)?
Derive from source code, Xamarin toolbar will be rendered as CommandBar within UWP platform. If you want to edit three dot. the easy way is edit the default UWP CommandBar style, find the MoreButton button element, and replace FontIcon glyph property value with you want. The following is CommandBar segment style that replace the three dot with heart.
<Button
x:Name="MoreButton"
Grid.Column="1"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
VerticalAlignment="Top"
Control.IsTemplateKeyTipTarget="True"
Foreground="{TemplateBinding Foreground}"
IsAccessKeyScope="True"
Style="{StaticResource EllipsisButtonRevealStyle}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}">
<FontIcon
x:Name="EllipsisIcon"
Height="15"
VerticalAlignment="Top"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="15"
Glyph="" />
</Button>
There are many icons that you can customize. You can refer to Segoe Fluent Icons font
Note: You need to the set the margin of the FontIcon to adjust the icon vertically and horizontally centered.
To make a chat page, I followed an example I found that sets the ListView rotation to 180, so the list builds from the bottom and then set things in the DataTemplate to rotate 180, so the items will be upright. It's a great solution, but when the keyboard opens, the ListView gets shorter which causes a redraw. During the redraw, the ListView initially appears with rotation 0 and I see an animation as if RotateTo(360) is being called. After initially displaying, I get to watch the list view rotate around in full circle. Click off the message editor, and the ListView gets taller, and it does it again.
Has anyone seen this?
Here's what the Xaml looks like. I can't make a gif of what it looks like, but imagine watching:
MessageList.Rotation = 0;
MessageList.RotateTo(360, 500, Easing.Linear);
each time the keyboard shows and hides, and you'll get the idea...
<ListView
X:Name="MessageList"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
Rotation="180"
ItemsSource="{Binding ChatMessages}"
SelectionMode="None"
HasUnevenRows="True"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame
BackgroundColor="LightGray"
FlowDirection="LeftToRight"
Rotation="180"
Padding="10"
HasShadow="false"
Margin="80,2,0,5">
<Label Text="{Binding ChatText}"/>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I followed the same tutorial you mentioned and you are probably using a ContentPage renderer to handle your keyboard layout updates on iOS. If you check the sample project https://github.com/rdelrosario/ChatUIXForms you'll notice he resizes the keyboard ContentView with a ContentView renderer for the Editor box at the bottom using the Margin property, rather than the entire ContentPage. Which doesn't trigger the above issue.
What I wound up doing was to make a custom ListView renderer that was keyboard aware in iOS and sets a translation X to move the top of the listview up when the keyboard appears and back down when it goes away. As a result, the listview is not getting resized, and thus does not redraw.
It may be messy, but it makes it work...
I am trying to create a menu (currently a ListBox containing Images) for an app (WP8 specifically, but general principal will be the same for other environments) with the behavior determined by the initial part of each gesture:
dragging/swiping the menu left or right will cause the menu to scroll left or right
dragging an item up from the menu (which is at bottom of screen) will allow it to be detached (or recreated) and placed in another container.
Roughly speaking, I understand how to drag-and-drop the element, and to make a side-scrolling menu, but I am having difficulties in putting the two together and determining whether to be in "menu scroll" mode, or "drag and drop" mode, and how to switch between the two programmatically.
<ListBox Height="100"
ItemsSource="{Binding}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Grid.Row="1"
Name="MainMenuPicker">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Path=Source}" Tap="Image_Tap"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Currently, horizontal scrolling is taken care of by ScrollViewer.HorizontalScrollBarVisibility="Auto"
I attempted to have a ManipluationStarted, ManipulationDelta etc to determine direction of gesture, but didn't get very far. I currently have a Tap event handler on the Image that moves moving to another parent container.
Questions:
1. How can I determine if a gesture is a side-to-side movement on the menu (ListBox) as a whole, or a drag (upwards) of an Image within the ListBox?
How can I programmatically set each case so that the functionality behaves as described?
Thanks in advance!
In this case you need to use Flick events,and use HorizaltalVelocity and vertcalvelocity to detect and distinguish between left-right and top-down swipes.
check this sample for better understanding
In my Windows Phone 7 app, I just tried to add 10 controls in a page, but only 7 controls are visible in the page. I want to add remaining controls in that page which is above phones' default screen size.
When I googled this I found that the ScrollViewer control is used to scroll pages. So I added the ScrollViewer above my grid and set its vertical scrollbar visibility to true, but nothing changes as I'm not able to view the controls.
How do I write the XAML using a ScrollViewer to show all my controls?
ScrollViewer can have only one child under it, but it can be any kind of element or element container like a Grid for instance.
Just add all the elements to that container and then you will be able to scroll all items.
For example you can use a StackPanel since that will simply wrap all items under each one
<ScrollViewer>
<StackPanel>
<!-- All your controls -->
</StackPanel>
</ScrollViewer>
this is working
<ScrollViewer>
<StackPanel>
<!-- All your controls -->
</StackPanel>
</ScrollViewer>
bt in stack panel it goes as stack we cant move controls as we wish. to get rid of that we can use grid.
<ScrollViewer>
<Grid>
<!-- All your controls -->
</Grid>
</ScrollViewer>
The toolkit:AutoCompleteBox in WP7 "opens" the Popup with results above the textfield. I need this Popup to be below the TextBox.
Wasted hours on this. finally, i've written my own autoCompleteBox with a ListBox opening below.
Just out of curiosity, pleas tell me how it shold be with the "original" one
I faced the same issue and this is how I solved it, using Perspective Transforms and RenderTransform in the borders of Popup in the default template.
<Popup>
<Grid>
<Border>
<Border.Projection>
<PlaneProjection GlobalOffsetX="-10" GlobalOffsetY="37" CenterOfRotationY="1" CenterOfRotationX="0" RotationX="180"/>
</Border.Projection>
<Border>
<Border.Projection>
<PlaneProjection RotationX="-180"/>
</Border.Projection>
<ListBox/>
</Border>
</Border>
</Grid>
</Popup>
Change GolbalOffsetX and GlobalOffsetY according to your textbox height and width.
There is no default property that will define the location for the popup in the AutoCompleteBox control.