I'm working on updating previously working app. Testing shows the ScrollViewer acting oddly when the Zoom makes part of the contained images fall off the screen. The original app was created with VS 2013 as a Universal Windows app. The new app is created with VS 2015 as a Universal Windows app though the target build has been shifted to the anniversary release.
My XAML is defined so:
<ScrollViewer x:Name="SV1" Grid.Row="1" HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
SizeChanged="SV1_SizeChanged" ZoomMode="Enabled" >
<StackPanel x:Name="ImagePanel" Orientation="Horizontal" HorizontalAlignment="Center"
VerticalAlignment="Top" >
<Image x:Name="ImageLeft" Stretch="Uniform" />
<Image x:Name="ImageRight" Stretch="Uniform" />
</StackPanel>
</ScrollViewer>
The user can change the ZoomLevel of the ScrollViewer. The zoom change is implemented using SV1.ChangeView(null, null, zoomFactor).
The images visibly change size on the screen, but as they fall off the right or bottom the scrollbars don't appear. Even changing the visibility properties to "Visible" instead of "Auto" doesn't cause the scrollbars to appear. When the size changes and for a brief instant a thin line will appear where the bars should be and then disappear. Additionally, user input that would normally scroll like moving the mouse wheel does nothing.
Based on other commentary, I've tried replacing the StackPanel with a Grid with no apparent effect.
I'm drawing a blank. Any ideas?
It appears the answer is the next control which shares the same visual space needs to be set to Visibility="Collapsed" in the XAML. The visibility is controlled programmatically, but without the XAML tag the scrollbars of the previous control don't appear and with the tag they do.
Related
I am trying to make responsive WPF app which shows image. One of the program's functionalities is selecting a piece of an image by clicking and draging the mouse. I use Point p = e.GetPosition((IInputElement)sender); to find cursor position, and I found out I cannot use Stretch="Fill" because it causes the MouseUp cursor to select a little lower than it should and MouseMove is also inaccurate (I have to drag the mouse a lot further than I should). On the internet, I found the reason for this behavior that you cannot use Fill and have to use None instead. However, the image is much smaller without Fill.
This is my XAML:
<Grid Grid.Row = "1"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment= "Top"
Margin="0,30,0,0">
<Image x:Name= "image1"
Grid.Row = "1"
Grid.Column="1"
Cursor="Cross"
MinWidth="300"
MinHeight="300"
MaxWidth="512"
MaxHeight= "512"
Stretch = "None"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"
VerticalAlignment="Top"
MouseDown="picOriginal_MouseDown"
MouseMove="picOriginal_MouseMove"
MouseUp="picOriginal_MouseUp" />
</Grid>
I don't know how to embed my image so that in the window view it fills the grid without this Fill property and at the same time is responsive for fullscreen. Should I wrap Image with something else from the WPF toolbox?
I find it easier using the background of the picture box to be the image then use the stretch in that. Alternatively, you could use the image with any of the other options, try using the the properties tab, here are the other stretch options tho: None, Fill, Uniform, UniformToFill
Tell me if this helps, tryna get rep, thanks!
I am seeing inconsistent placement of my Popup control when my application is run on different computers. I have the Placement set to AbsolutePoint and experience the popup being aligned to popup's top right on 2 computers, but to the popup's top left on 1 other computer (when running the same application on each computer).
I am positioning the popup using the HorizontalOffset and VerticalOffset dependency properties, relative to the screen's top left coordinate.
The documentation (https://msdn.microsoft.com/en-us/library/bb613596%28v=vs.110%29.aspx) shows that the popup alignment point should be to the top left of the popup, with the target area being the whole screen (and so target origin in the top left of the screen).
Thinking that it might be a change in the .Net framework or a difference in display scaling factors (unlikely, but still), I gathered the following info, but I cannot see an obvious reason for this behaviour;
The computers where the popup alignment point is to the popup's top right are:
1).Net Framework 4.5.1 and scaling factor of 125%
2).Net Framework 4.5.2 and scaling factor of 100%
The computer where the popup alignment point is to the popup's top left is:
1).Net Framework 4.5.2 with an unknown scaling factor (I need access to it to check again).
Any ideas why the placement is inconsistent? It is not to do with the screen's boundaries - the popup is not near any edge.
I fixed this issue by adding a border in the same grid col/row as the desired placement target. Then set this as the placement target instead. By binding the width of this border to the popup content it will adjust it's width automatically therefore the alignment (left or right) is irrelevant. If you want to still control alignment, you can do that by aligning the placement target border. Hope that makes sense, if not, here is a quick example.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Popup x:Name="StartMenuPopup" Placement="Top" PlacementTarget="{Binding ElementName=PopupTarget}" >
<Border x:Name="PopupBorder">
</Border>
</Popup>
<Border x:Name="PopupTarget" Grid.Row="1" Width="{Binding ActualWidth, Mode=OneWay, ElementName=PopupBorder}"
BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<startmenu:TaskBar Grid.Row="1">
<startmenu:TaskBar.StartButton>
<startmenu:ToggleMenu Width="36" x:Name="StartButton"
ImageData="{Binding StartButtonImageData}"
AssociatedPopup="{Binding ElementName=StartMenuPopup}"
IsOpen="{Binding StartMenuOpen, Mode=TwoWay}"/>
</startmenu:TaskBar.StartButton>
</startmenu:TaskBar>
</Grid>
The popup PlacementTarget binds to the PopupTarget border, and the PopupTarget border width binds back to the PopupBorder element. This makes the PopupTarget border the same width as the popup therefore negating the alignment issue.
I am using the Fluidkit ElementFlow control that I use to display a UserControl that contains textblock with a ScrollViewer as well as button and when they are displayed in the ElementFlow control, all of the buttons and the ScrollViewer seem to be disabled because I can't scroll the ScrollViewer scrollbar and even a simple action as hovering over a button doesn't do anything to the button.
Below is an example of the TextBlock in a ScrollViewer that does not allow for scrolling when used in the ElementFlow.
How can this be fixed?
<ScrollViewer
Height="1200" Width="800"
MaxHeight="1200" MaxWidth="800"
VerticalScrollBarVisibility="Auto">
<TextBlock
Height="Auto" Width="800"
MaxWidth="800"
FontSize="20"
Text="Super long text"
TextWrapping="Wrap"/>
</ScrollViewer>
Just looking over the source code for the project, it looks like it is creating a 3D mesh, and painting the controls on the mesh. This would prevent all user interaction. I don't think there is an easy way to work around this.
However, since you have the source code, you can do the work yourself to make it happen. You're going to need to modify how the ElementFlow represents its items. Look at the CreateMeshModel function. It is currently creating a mesh and applying a VisualBrush to it. Instead, look at the blog post Interacting with 2D on 3D in WPF to figure out what needs to happen.
Inside ScrollViewer control I have a large image and I want to use scroll bars to move that image inside ScrollViewer. See XAML code below:
<ScrollViewer HorizontalAlignment="Left" Height="282" Width="554"
HorizontalScrollBarVisibility="Visible" VerticalScrollMode="Enabled">
<Image HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top"
Source="Assets/big_image.jpg" Stretch="None" ManipulationMode="None"/>
</ScrollViewer>
This works fine on my PC. I can use mouse to move image inside ScrollViewer by using scrollbars. But when I deploy application on the tablet, I cannot do anything. The scrollbars are not visible and I cannot use gestures to manipulate the image. Does anyone know how can I solve this problem?
There is a Microsoft example with similar functionality:
http://code.msdn.microsoft.com/windowsapps/XAML-ScrollViewer-pan-and-949d29e9
This example uses a Scrollviewer with an inside image to show the capabilities of the ScrollViewer control to pan and zoom. I tried it with a tablet and it works well.
Hope it helps.
I am currently looking at the C# Metro default controltemplate for scrollbar. And in it the scrollbar template, there is this portion that called verticalpanningroot. Do you have any idea which part of the scrollbar UI is it responsible to render?
<Grid x:Name="VerticalPanningRoot" VerticalAlignment="Top" MinHeight="66">
<Border x:Name="VerticalPanningThumb"
Background="{StaticResource ScrollBarPanningBackgroundThemeBrush}"
BorderBrush="{StaticResource ScrollBarPanningBorderThemeBrush}"
BorderThickness="{StaticResource ScrollBarPanningBorderThemeThickness}"
Width="4" MinHeight="17"/>
</Grid>
Thanks.
If you mean x:Name="VerticalPanningRoot", it just means that you can access your Grid by it's name in your code behind (C#) which is VerticalPanningRoot.
Example:
VerticalPanningRoot.HorizontalAlignement = // something
Edit:
Your Grid is actually holding the "thumb" (the Border element) of the ScrollBar (the thumb is the part you can drag and drop to go down and up more faster).
You can see here all the ScrollBar parts, this image is taken from this tuto.