I have to zoom an image in uwp application, which works fine, but the design requires to have another image (that works as a button) in front of it and I dont want that element to be zoomed as well. It has to be only the image inside the canvas tag, this is how I have it now.
<ScrollViewer MinZoomFactor="1"
ZoomMode="Enabled"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<RelativePanel HorizontalAlignment = "Stretch" >
<Canvas x:Name="canvas">
<Image Source = "{Binding Test,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
</Canvas >
<Button RelativePanel.AlignTopWithPanel="True"
Height="55"
Command="{Binding Path=CollapseSplitView}"
CommandParameter="{Binding ElementName=SplitV}">
<Button.Background>
<ImageBrush ImageSource = "/Assets/btlist.png" ></ ImageBrush >
</Button.Background >
</Button >
<Image RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Source="/Assets/escala-x.png"
Width="130"
Height="70"
Margin="0,0,20,0"
ScrollViewer.IsZoomChainingEnabled="False"
ScrollViewer.IsZoomInertiaEnabled="False">
</Image>
</RelativePanel>
</ScrollViewer>
thats the xaml I have and which makes the zoom work for all elements inside of it. I tried to set scrollViewer.zoomMode=disabled for the elements that are not in the canvas but without luck. Any ideas? Thanks!
I finally fixed it by adding a scrollViewer inside the RelativePanel and then wrap the contents I wanted to zoom inside a StackPanel and then a Grid to be able to have multiple elements inside. Thanks all
Related
So, I've got this mediaelement, which I want to appear in the middle of the screen, 20 pixels away from each edge, and when it's width gets to 600, it stops expanding and stays where it is. I've got the following XAML to get exactly what I want:
<Grid x:Name="video">
<MediaElement x:Name="player" AreTransportControlsEnabled="True" Margin="20,0" MaxWidth="600" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
The only problem is that the VerticalAlignment property seems to always be set to "Stretch". How can I fix this? I've tried using a viewbox, which works flawlessly, except I then get overly large or small TransportControls. I've also tried putting the mediaelement inside another grid with centered alignments, but I still get the same problem.
What you want is
20 pixels away from each edge.
But in your code you defined Margin="20,0", if you read the FrameworkElement.Margin property, you will find the useage <frameworkElement Margin="left+right,top+bottom"/>. With your code, this usage makes your MediaElement stretch in the vertical orientation.
If you use the Live Visual Tree to get a real-time view of your running XAML code, you will find, when you use the code Margin="20,0", the MediaElement is like this:
And if you use the code Margin="20", the MediaElement is like this:
The dashed red border in each picture stands for the MediaElement control.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot Margin="0,0,0,0" Background="LightGray">
<PivotItem Header="Formulas">
<Grid>
<GridView HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Background="#FF983636">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
<x:String>Four</x:String>
</GridView>
</Grid>
</PivotItem>
</Pivot>
</Grid>
The key here is HorizontalAlignment="Stretch" on the GridView.
The HorizontalAlignment="Center" on the VariableSizedWrapGrid inside the ItemsPanelTemplate inside the Gridview; should do the trick which will always keep the content centered regardless of the width of the screen.
In the end, I found how to fix this, by keeping a constant aspect ratio of 16/9:
XAML:
<Grid SizeChanged="player_SizeChanged" Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="1" MinHeight="1" Margin="30" MaxWidth="1000" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<MediaElement x:Name="player" Margin="0">
</Grid>
C#:
private void player_SizeChanged(object sender, SizeChangedEventArgs e)
{
(sender as Grid).Height = (e.NewSize.Width * 0.5625);
}
I have a horizontal ScrollViewer that contains a single StackPanel, which is initially empty. UserControls are created on button-click, and added to the StackPanel. The code looks something like this:
<ScrollViewer Grid.Column="1" Grid.Row="0" RequestedTheme="Dark" ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<StackPanel x:Name="Container" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto">
<!--User controls added here dynamically-->
</StackPanel>
</ScrollViewer>
As you can see the ScrollViewer is itself in a larger Grid. Now I would like a Polygon to be added to this ScrollViewer, but I cannot add it as a child directly, since "Content can only be set once". If I add it to the StackPanel in code-behind (after setting Canvas left, top and ZIndex), the UserControls are added below the Polygon. I want them to be under or over, either will do. Is this even possible? Right now, my Polygon shares the same Grid Row and Column as the ScrollViewer. Here is my Polygon:
<Polygon x:Name="Gripper" Grid.Column="1" Grid.Row="0" Points="0,0 0,730 -30,750 -30,800 30,800 30,750 0,730 0,100" Stroke="#DEDEDE" StrokeThickness="1" Opacity="1.0" ManipulationMode="TranslateX" ManipulationDelta="Gripper_ManipulationDelta">
<Polygon.Fill>
<SolidColorBrush Color="#FFFFFF" Opacity="0.9"/>
</Polygon.Fill>
<Polygon.RenderTransform>
<CompositeTransform />
</Polygon.RenderTransform>
</Polygon>
I am okay with adding it in XAML or C#, but I think I would prefer to do it in C# since I would like to change the points based on the size of the screen.
Put another container control between the StackPanel and the Polygon. An intermediate Grid will let you control their placement by row and column as normal. An intermediate StackPanel will let the Container stack and Polygon stack separately from the items within the Container stack:
<ScrollViewer>
<Grid>
<StackPanel x:Name="Container" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto">
<!--User controls added here dynamically-->
</StackPanel>
<Polygon />
</Grid>
</ScrollViewer>
I have a listbox with objects but I cannot scroll to the bottom of the page. What is the problem? This is the code that I'm using.
<Grid>
<Image Name="Nietcomment" Source="write.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup" Visibility="Visible"/>
<Image Name="welcomment" Source="write2.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup_remove" Visibility="Collapsed"/>
<ScrollViewer Name="scrollview" VerticalScrollBarVisibility="Visible" Margin="0,0,0,0" Foreground="Black">
<StackPanel>
<TextBlock x:Name="NTitelComment" Text="{Binding}" TextWrapping="Wrap" FontSize="25" Margin="10,0,10,0" Foreground="#FFE5001b"/>
<Line Stretch="Fill" Stroke="Black" X1="0" X2="1" Y1="0" Y2="0" Margin="10,0,10,0"/>
<TextBlock x:Name="tijdComment" Text="{Binding}" Margin="50,0,10,0" Foreground="Black"/>
<Image Height="20" Width="20" Margin="-380,-20,0,0" Source="/PostDateIcon.png"/>
<ListBox Margin="0,0,0,20" Name="lbComments" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
</Grid>
If you put a border around your ScrollViewer, can you see if it goes outside of the screen maybe? Will it help to set a fixed height of the Grid or ScrollViewer?
Keep in mind the phone has built in scroll, so your ScrollViewer maybe doesn't play well with it.
With so much fixed margins, your layout will be impossible to manage, especially when dealing with differents screen resolutions and especially with negative margins.
Anyway, right now, you have two scrollviewers, as your listbox contains one as well.
You should disable the listbox scrollviewer or it will prevent your page to scroll.
Just change your listbox:
<ListBox
Margin="0,0,0,20"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Name="lbComments"
VerticalAlignment="Top" />
It will disable it's scrollviewer and allow it to scroll with the rest of the page.
I am developing a Windows Store application with C# and XAML in which I have an image being displayed on user screen. On certain event I want to change its position on screen to the coordinates of my choice.
I have tried
Canvas.SetLeft(selectedImage, screenCoords.X);
Canvas.SetTop(selectedImage, screenCoords.Y);
and
selectedImage.SetValue(Canvas.LeftProperty, screenCoords.X);
selectedImage.SetValue(Canvas.TopProperty, screenCoords.Y);
But they are not working. I have also tried updating the layout after this. can anyone tell me what exactly am I doing wrong here?
Here is the XAML code:
<FlipView.ItemTemplate>
<DataTemplate>
<Grid x:Name="cv">
<Image x:Name="img1" Source = "{Binding ModelImage}" Stretch="Fill" Tag="{Binding ModelTag}" Tapped="ModelTapped"/>
<Image x:Name="hat" Source = "{Binding HatImage}" Width="{Binding HatWidth, Mode=TwoWay}" Height="{Binding HatHeight, Mode=TwoWay}" Stretch="Fill" ManipulationMode="All" ManipulationDelta="ResourceImage_ManipulationDelta" Tapped="imageTapped" Tag="{Binding hatTag}" Canvas.ZIndex="3">
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
I have several images in the grid named 'cv', just removed them for simplicity. selectedImage in above C# code is one of the images in the grid 'cv'.
I solved the issue by translating my image to the desired points using RenderTransform property.
in my Windows Phone application I have such structure:
<Grid Width="460" Height="77" Margin="-10,0,0,0" Background="#FFD20000" HorizontalAlignment="Center">
<StackPanel Width="Auto" Orientation="Horizontal" HorizontalAlignment="Center" >
<ToggleButton x:Name="ToggleButton_A" Content="Info" Width="150" Style="{StaticResource ToggleA}" Click="ToggleButton_A_Click" />
</StackPanel>
</Grid>
In my case I have a button in the center of conteiner. But I need to make it fill all place of it's parent conteiner, how can I implement this?
Simply remove the stackpanel, and the ToggleButton will fill all the grid. Everything is about using the right container for the right task.