I have a project where I have multiple scrollviews in one:
I can scroll up and down through a single item, and also through multiple items horizontally.
Normally, the webview is not hittestvisible.
Moving horizontally works fine, but when I scroll down, I give focus and hittestvisibility to the single item, but it won't scroll down. Only when I scroll down the second time, it will scroll, I think because when the ManipulationStartedevent was fired, it was caught by the scrollview, which had focus at the time, and only later the webview takes the focus, therefore, it has no started position. Is there a workaround for this problem?
<ScrollViewer x:Name="Scroller"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled"
ManipulationMode="Control"
Grid.Row="1" Grid.RowSpan="2" >
<StackPanel Name="WebScrollView" Orientation="Horizontal" >
<UserControl Name="LeftContentControl" MinWidth="480" />
<UserControl Name="MiddleContentControl" MinWidth="480" />
<UserControl Name="RightContentControl" MinWidth="480" />
</StackPanel>
</ScrollViewer>
So, Left, Middle and Right are the three controls which will hold the webviews as their content. When scrolled to the left( for example ), the left content is placed over the middle content, and the middle content is set into view again, so it seems like an endless list of webviews, but really are three.
I use a mediator to achieve the animation of the webviews.
Thanks in advance.
GeekPeek
Related
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 have two buttons. One is an edit button that when clicked allows the editing of other objects on the page. My hope is to have the second button appear only once this "edit state" has been initiated. That part isn't very difficult. However, I don't want to just alter the 1st button's alignment from right to left to make space for the 2nd button (a cancel button) to the 1st button's right - I want to animate this movement, as if to make it appear that the moving of the 1st button to the left, is uncovering the 2nd button.
I've been searching for hours trying to find out how to do this, and there's a multitude of options for WPF, but not many solutions for UWP applications.
So far, I've found this:
<Button x:Name="EoIdButton" Grid.Row="0" Grid.Column="2" view:EventHandlers.Attach="Click" BorderBrush="DarkGray" FontFamily="Segoe MDL2 Assets" Content="{Binding EoIdButtonContent, Mode=TwoWay, Converter={StaticResource SegoeConverter}}" Style="{StaticResource CircleButtonStyle}" Visibility="{Binding EoVis, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding SomeProperty, Mode=TwoWay}">
<core:ChangePropertyAction></core:ChangePropertyAction>
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
So, while I can change a property using this, I don't see how to create an animation. My guess, based on my searching would be to use a Storyboard, but again, most of the solutions I've found pertain to WPF and/or don't work because the scenario is too different. If someone has a solution for this, it'd be great.
For additionaly clarity
I have button 1:
(EditButton)
When (EditButton) is clicked, I want edit button to rendertransform/animate left and the result to look like so:
(EditButton)(CancelButton)
When either edit button or cancel button are clicked, I want it to return to the original state
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
I have a page with two text boxes, a check box and another two text boxes below at the bottom.
When I click on the check box, i want to set focus to the text box below it.
This works fine, the soft-keyboard appears and the screen scrolls up to reveal the text box above the keyboard.
However, if either TextBox1 or TextBox2 is currently in focus and the keyboard is already showing, setting focus from the CheckBox_Click event will reset the screen and it scrolls back down.
I'm guessing that the events clash with one another
- TextBox loses focus and hides the keyboard + scroll the screen back down
- TextBox got focus from outside and shows the keyboard (but doesn't scroll the screen up)
Can this be prevented somehow?
Here's a simplified version of the xaml and code
The xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Margin="0,100,0,0">
<TextBox x:Name="TextBox1" />
<TextBox x:Name="TextBox2" />
<CheckBox Content="Click Me" Click="CheckBox_Click" />
<TextBox x:Name="TextBox3" />
<TextBox x:Name="TextBox4" />
</StackPanel>
</Grid>
the code behind:
private void CheckBox_Click(object sender, RoutedEventArgs e)
{
TextBox3.Focus();
}
The problem you have is that the OS will try and move the page when the focus is on a control that isn't in a scrollable container and is obscured by the SIP.
I've worked around this by putting all the content in a ScrollViewer and adjusting the VerticalScrollOffset based on the selected control and if the SIP is shown or not. This was a lot of very messy, fiddely code. Ask yourself if the value of moving the focus is worth the effort before starting as there isn't a simple solution.
I have a trouble when try to rotate MapBase. As far as I didn't find a way to rotate content inside map(i mean tiles). I made a rotation transform with map itself and put it in square to emulate a rectangual viewport.
The problem is the map corner flows over corner of square while rotating and what worst it moves over pivot items titles and I don't know how to bring it to the bottom.
Is there any workaround of that? Or may be other way to rotate the map content?
UPDATE
XAML CODE
here is my code
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<controls:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<controls:PivotItem Header="first">
<Grid d:LayoutOverrides="Height" Margin="-44,-30,44,30">
<Microsoft_Phone_Controls_Maps:Map Margin="-18,-72,2,76" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
<Microsoft_Phone_Controls_Maps:Map.RenderTransform>
<CompositeTransform Rotation="36.01"/>
</Microsoft_Phone_Controls_Maps:Map.RenderTransform>
</Microsoft_Phone_Controls_Maps:Map>
<Rectangle Fill="#FFF4F4F5" Height="54" Margin="-14,-42,0,0" Stroke="Black" VerticalAlignment="Top"/>
</Grid>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem Header="second">
</controls:PivotItem>
</controls:Pivot>
</Grid>
In the example is on the top of map, but map is on the top of Pivot headers and even application title is on the back of map corner...
And If you Load another page in "Paysage Orientation" when you rotate your phone ? (It's maybe a temporaly solution... ) but you want to reaload your map with good dimension.
It's not a good idea to use a Map Control inside a Pivot if gesture interaction is enabled.
Don’t use Slider, ToggleButton, or Map controls in a Pivot control. Don’t use controls that can pan or scroll inside a Pivot control. For example, if you put a Map control inside a Pivot control it might be difficult to use the Pivot control. The gesture input gets confused. The solution is to navigate to a subpage with controls that require gesture input. You can place a map in a pivot page as long as the map isn’t enabled for gesture interaction. You could overlay a button that would activate the map. Pressing the button would actually navigate to a separate page with just the Map control on it. The user could then press the Back button to go back to the Pivot control.
http://msdn.microsoft.com/en-us/library/windowsphone/design/hh202919%28v=vs.105%29.aspx