OK, bizarre issue here. I have a map, and I am binding to the center and zoom level. However, binding to the ZoomLevel has odd consequences.
If I move the ZoomLevel binding before the Center binding, it kills the Center binding. Setting the Center in the view model has no effect, and moving the map around does not update the Center property.
If I keep it as shown, Center and ZoomLevel bind properly, but the MapItemsControl does not. When I search, pushpins for the search results do not show up on the map.
If I remove the ZoomLevel binding entirely, everything works -- Center binds correctly, and the pushpins show up. But, I have no programmatic control over the zoom level now.
This has left me completely bewildered. I have tried changing it to OneWay (I don't really need to know the zoom level in the view model, only set it) but then setting the zoom level in the view model no longer zooms the map, which is bizarre as well. I can change Center to be one-way and it still recenters the map when changed in the view model.
<map:MapControl Grid.Row="0"
Center="{Binding Path=Center, Mode=TwoWay}"
ZoomLevel="{Binding Path=ZoomLevel, Mode=TwoWay}"
MapServiceToken="{StaticResource ResourceKey=MapServiceToken}">
<map:MapItemsControl ItemsSource="{Binding Path=SearchResults}">
<map:MapItemsControl.ItemTemplate>
<DataTemplate>
<Button Background="Red" Content="{Binding Path=Name}" map:MapControl.Location="{Binding Path=Point}"></Button>
</DataTemplate>
</map:MapItemsControl.ItemTemplate>
</map:MapItemsControl>
</map:MapControl>
EDIT: For those interested, initializing the ZoomLevel to a non-zero value in the view model's constructor seems to resolve this.
Related
I can't center the shadow provided by <toolkit:ElevatedView> around the contained object. By default the shadow falls to the lower right corner. I've tried shifting with margins as well as RenderTransform, but can't find a good way to move the shadow.
What I have:
<toolkit:ElevatedView x:Name="Shadow1" Elevation="25" ShadowColor="Gray" CornerRadius="20" Background="Transparent">
<Grid>
<Grid.RenderTransform>
<TranslateTransform X="20" Y="20"/>
</Grid.RenderTransform>
...stuff
</Grid>
</toolkit:ElevatedView>
This kind of works but screws up the grid corner radius because it is being shifted beyond its max width. Is there a way to simply move the shadow location instead of trying to shift the content inside the shadow?
As of Uno Platform 3.11, the ElevatedView Control does not support changing the orientation of the shadow, only the elevation.
You may want to open an enhancement request on the Uno Platform GitHub repository.
We were able to understand if ItemsControl finished it's rendering by checking Status within StatusChanged event in WPF.
How can I make sure that ItemsControl finished rendering in UWP? I want to make sure that rendering is completed and access some elements using ContainerFromItem.
I have custom dragging logic using events like ManipulationDelta. After rendering, I want to get the ContentPresenter's position based on it's parent UIElement and then use that position to draw some stuff using Win2D. I need item's position, so I need the container, so I need to make sure containers are rendered in the first place, and it goes like that.
To use ItemsControl in UWP, you also need to know about the UI virtualization. The ItemsControl uses UI virtualization. It means that not all items will be rendered at the same time, instead only the viewable area.
You could try the following code:
<ItemsControl x:Name="item">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Loaded="Grid_Loaded">
<TextBlock Text="{Binding}"></TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I registered the Loaded event for the 'Grid' which is included in every item.
I am trying to get a RichEditBox to take over the entire width of the app window and to be responsive to window resizing, so far the code I have is the following:
<RichEditBox HorizontalAlignment="Stretch"
TextWrapping="WrapWholeWords"
Height="250"
Name="Intro"/>
What I am getting from the code above is this:
Any ideas on how can I get this to work? Why is it that I tell the text to wrap and it doesn't follow?
UPDATE
I also tried this:
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
But the result is:
The problem that I am having is that it seems that HorizontalAlignment="Stretch" does not really do anything. The only way I am able to set a decent width is by hard-coding it, for example: Width="600". But if I do this my UI will not respond correctly to resizing. I also tried HorizontalContentAlingment="Stretch" but the result is exactly the same.
How can I get my RichEditBox take up all the available Width and Wrap at the same time?
If you look at the documentation of RichEditBox.TextWrapping, you'll notice that WrapWholeWords is invalid. You have to use
<RichEditBox TextWrapping="Wrap"/>
-or-
<RichEditBox TextWrapping="NoWrap"/>
Since Wrap is the default value, you can drop the property.
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
Edit: in reply to the updated question:
A control only takes the width of it's parent control. Some container controls (e.g. Grid) automatically take the full width available, while others (e.g. StackPanel) only take the required size of it's children. Using HorizontalAlignment="Stretch" in combination with a StackPanel as a parent control, will only use the MinWidth property instead of the full available width on your screen. Sometimes you can't directly see this issue, e.g. when your control is inside an itemtemplate of a ListView. Use the Live Visual Tree in Visual Studio to find the parent containers and locate the issue.
So in short: make sure your RichEditBox is inside a Grid (or similar control) instead of a StackPanel.
I have a Canvas that overrides PointerMoved event do some stuff if the user "paints" on it. Now I'm trying to move this Canvas inside a ScrollViewer to add Zoom and Scroll effects which works perfectly.
<ScrollViewer x:Name="MainScrollViewer" Grid.Column="1"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
ZoomMode="Enabled" MinZoomFactor="0.5" MaxZoomFactor="2.0" >
<Canvas x:Name="MainCanvas" Background="#000000"
HorizontalAlignment="Left" VerticalAlignment="Top"
PointerMoved="MainCanvas_PointerMoved" />
</ScrollViewer>
However, the ScrollViewer captures all the Pointer move Events and this caused the main paint procedure not working anymore.
Any idea on how to fix this?
Drawing with touch while still allowing zooming/panning - this is currently not supported in XAML. You will need to turn OFF zooming/panning in order to be able to draw with Pointer events and it is not possible to obtain system zooming and panning behaviors simultaneously with custom manipulations. You can however try to use Manipulation events by setting ManipulationMode=All and handle two finger scrolling and pinch zoom using Scale and Translate values manually.
See more at: Touch based drawing app with a Canvas inside a ScrollViewer
I didn't work with canvas and scrollview but I think which I found will help you :)
There is a trick! You can add a tool button (like hand) to switch in two conditions.
First condition enable drawing: you can disable HorizontalScrollMode and VerticalScrollMode of ScrollViewer which gives you ability to use pointer events of Canvas.
In second one you should enable the HorizontalScrollMode and VerticalScrollMode for ScrollViewer, and it works!
To change ScrollViewer properties programmatically:
MainScrollViewer.HorizontalScrollMode = ScrollMode.Auto;
MainScrollViewer.VerticalScrollMode = ScrollMode.Auto;
MainScrollViewer.ZoomMode = ZoomMode.Enabled;
I have layout as described below:
<ScrollViewer>
<StackPanel Orientation="Horizontal">
<!-- ... -->
<ScrollViewer>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Visible" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ScrollViewer>
<!-- ... -->
</StackPanel>
</ScrollViewer>
And I would like to achieve that effect that is present in weather app.
In my application, when you're scrolling horizontaly using mouse wheel, when pointer gets over ItemsControl it immediately starts scrolling verticaly wheras in weather application there's fluent horizontal scrolling effect and scrolling verticaly begins when there's some time hover that vertical collection.
Is that behaviour somewhere implemented by default?.
Szymon
Generally, the guideline is that introducing vertical scrolling in a horizontally scrolling repeater is a bad idea. I think you should NOT consider Weather (or any standard Windows 8 app) as a model to emulate. Most of them violate the guidelines in some of the worst ways.
The Weather app accomplishes what you are asking based on the current mouse placement, the motion of the grid, and control with focus. That's a complex way of saying, some developer dreamed up a solution to help make their UI as confusing to the user as possible.
Please, don't.
What I think they do in order to achieve that effect is this:
If the mouse is over the vertical list for a while, they deactivate the horizontal scroll and activate the vertical one. Once the mouse moved outside the list, they switch back (deactivate the vertical scroll and activate the horizontal scroll).
I have not tested this to see if this works, but I think it should.