How can I force a UI object to NOT be clipped when it's partly outside the screen. I have an image that doesn't fit inside the screen completely. When I drag it (TranslateY) it moves like it's supposed to but the problem is that the part that was outside the screen doesn't appear so the image is abruptly cut. The only part of the image that is visibly moving is the part that originally fit to the screen.
Ps. Please do not recommend scollviewer as this is about a gesture to do a specific thing on the UI and ScrollViewer is not ok for that.
This is basically the XAML (The image is twice the height of the display)
<Grid x:Name="GestureScreen" ManipulationMode="TranslateY" RenderTransformOrigin="0.5,0.5">
<Image x:Name="GestureImage" CacheMode="BitMapCache" Source="Assets/bg/draggable.png" />
</Grid>
This is the C# (not really relevant, but still)
void GestureScreen_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
move.Y += e.Delta.Translation.Y;
}
Specify a row and column for the image which directly specifies Auto for both. That way the image will size to its actual size and not the current size of the * defaults of the screen size. Hence you will have the whole image as dragged.
Related
I am working an app that uses an image as its background, and I want it to fill the entire window regardless of size. The image source is square-ish, like this:
The simplest way to do this is using AspectFill like this:
<Image
Source="image_source.png"
Aspect="AspectFill"/>
But that results in the image being centered, like this:
When what I need is for the image to be left aligned, like this:
I almost had some success using this:
<AbsoluteLayout>
<Image
Source="image_source.png"
AbsoluteLayout.LayoutFlags="HeightProportional"
AbsoluteLayout.LayoutBounds="0,0,Autosize,1"/>
</AbsoluteLayout>
but the problem there became when I had a screen like a tablet or foldable which is wider horizontally, it ended up getting letterboxed like this:
When what I would want would just be a regular AspectFill like this:
Is there any way to get this behavior with the existing Aspect options? If not, is there a way to extend the Aspect enum and the Renderer to make the image perform the same as AspectFill, but locked to the left edge of the image instead of the center?
I'm using XAML with .NET Maui, so if there is a solution in C# I'm open to that too
Was able to get a solution from Reddit, so I'm posting it here for anyone who stumbles across this:
My final XAMl ended up being
<Grid>
<Image
x:Name="backgroundImage"
Source="image_source.png"
Aspect="AspectFill"
HorizontalOptions="Start"/>
</Grid>
And I added this to the code-behind:
protected override void OnSizeAllocated (double pageWidth, double pageHeight) {
base.OnSizeAllocated(pageWidth, pageHeight);
const double aspectRatio = 1600 / 1441.0; // Aspect ratio of the original image
backgroundImage.WidthRequest = Math.Max(pageHeight * aspectRatio, pageWidth);
}
I have a grid with multiple buttons as children. Now I want to give this Grid rows a background color. So I added a border with a background color like this
Border brd = new Border
{
Margin = new Thickness(0, 2, 0, 2),
Background = (SolidColorBrush) Application.Current.Resources["RedBrush"],
CornerRadius = new CornerRadius(22),
};
Grid.SetColumn(brd,startColumn);
Grid.SetColumnSpan(brd, 9- startColumn);
Grid.SetRow(brd, startRow);
GridMain.Children.Add(brd);
All looks good to me, But when this is rendered all buttons are hidden as the Background color of Border only is visible in the row. How can I overcome this?
Instead of adding the Border from code behind, If I added in Xaml all works fine (border background is visible as button background and button text is visible)
<Border Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="8" Background="{StaticResource RedBrush}" CornerRadius="22" Margin="0 2 0 2" />
But for various reasons I wan the ability to add this border from code behind itself.
If you want to set the background color for Grid, you can directly use Grid.Background to set, without adding a new Border.
But if you need to add a Border as a background, please pay attention to the calling sequence in the code.
Generally speaking, the element added later will be placed on the top layer of the previous element, forming a visual effect of covering.
From your problem description. You can put the code that adds Border first.
Thanks.
I have a user interface with:
N.1 Push button (used to upload images)
N.2 QGraphicsView (left and right)
N.1 Push button that takes a print screen of the current image loaded on QGraphicsView left
Using the mouse is possible to:
1) zoom-in/zoom-out from the image
2) draw rectangles on the image.
I want to take the print screen of the image according to the zoom-in or zoom-out area I am using. However, once the file is saved it shows the entire image (wrong because I wanted only the enlarged or shrank part) with the rectangles drawn (this is correct).
According to this post QFileDialog was used in a similar way I am trying to do. I successfully used QFileDialog::getSaveFileName() to save the image. However it is not entirely solving the problem.
Below the pushbutton that takes care of taking the print screen of the image in the QGraphicsView left:
void MainWindow::on_addNewRecordBtn_clicked()
{
leftScene->clearSelection(); // Selections would also render to the file
leftScene->setSceneRect(leftScene->itemsBoundingRect()); // Re-shrink the scene to it's bounding contents
QImage image(leftScene->sceneRect().size().toSize(), QImage::Format_ARGB32); // Create the image with the exact size of the shrunk scene
image.fill(Qt::transparent); // Start all pixels transparent
QPainter painter(&image);
leftScene->render(&painter);
image.save(QFileDialog::getSaveFileName(this, tr("New Image Name"), QDir::rootPath(),
"Name (*.jpg *.jpeg *.png *.tiff *.tif)"));
}
The expected result would be saving the zoomed image (zoom.jpg for example) like this:
However when I save the image (zoom.jpg) the result that I am obtaining is constantly the entire image with the drawn features:
So if anyone needs, it is possible to take a print screen of an image no matter what the zoom in. Meaning you can zoom-in and zoom-out and take a print screen.
The following statement will do the job, grabbing the image your present (zoomed in or out status):
QImage image = ui->leftView->grab().toImage();
The only glitch is that the scroll bars horizontal and vertical (depending on the zoom) are also printed in your image. You can avoid that by setting them off right before taking the print screen and putting them back on right after.
Basically my previous function can be better written as follows:
void MainWindow::on_addNewRecordBtn_clicked()
{
leftScene->setSceneRect(leftScene->itemsBoundingRect());
// Setting off the scroll bars
ui->leftView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
ui->leftView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
QImage image = ui->leftView->grab().toImage();
image.save(QFileDialog::getSaveFileName(this, tr("New Image Name"), QDir::rootPath(),
"Name (*.jpg *.jpeg *.png *.tiff *.tif)"));
// Putting the scroll bars back on
ui->leftView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
ui->leftView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
}
Hope this will be helpful in case you encountered my same problem.
I'm struggling with new UWP InkCanvas for my apps.If you are familiar with the new InkCanvas in UWP, I would truly appreciate your help.
I have a UWP apps need to switching between InkCanvas and Canvas, which I wish to use InkCanvas for Drawing, Canvas for creating Contents such as RichEditbox, Image, etc...
My XAML is below
<Grid Margin="100,0,100,0" Background="White" x:Name="MainGrid" PointerMoved="MyCanvas_PointerMoved" PointerReleased="MyCanvas_PointerReleased" PointerPressed="MyCanvas_PointerPressed">
<Canvas x:Name="MyCanvas" />
<InkCanvas x:Name="inkCanvas" Canvas.ZIndex="0" />
<!-- End "Step 2: Use InkCanvas to support basic inking" -->
</Grid>
I tried to make my Canvas ZIndex greater than InkCanvas by using
private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
if(Canvas.GetZIndex(MyCanvas) > 1)
{
Canvas.SetZIndex(MyCanvas, 0);
}
else
{
Canvas.SetZIndex(MyCanvas, 5);
}
}
However I can't make my Canvas come to the front, the InkCanvas keep Capturing my stroke if I Draw on it instead.
Does anyone know how to switch the Canvas and InkCanvas in my Grid without changing the Visibility of my InkCanvas to Collapsed?
By default the Canvas background is empty (null), so it will not capture pointer input and will pass it through to the InkCanvas.
If you want to prevent this, you could set its Background to Transparent.
However, when you start putting some controls on the Canvas itself, they should capture the pen input and not let it through to the InkCanvas.
I'm trying to implement something in my app, I need to show an image, and let the user pinch in and out of the images.
I think its possible using the ScrollViewer, but I couldnt get it to work, help?
I hate to oversimplify this, but the WinRT XAML ScrollViewer has gesture manipulation built in.
You can see what I mean here. This might not be what you want. But it's sure a simple approach and might fit a certain % of scenarios. Maybe even yours.
Controls that incorporate a ScrollViewer in compositing often set a value for ZoomMode in the default template and starting visual states, and it is this templated value that you will typically start with. Controls with a ScrollViewer as part of their composition typically use template binding such that setting the attached property at the level of the control will change the scroll behavior of the ScrollViewer part within the control. Otherwise, it may be necessary to replace the template in order to change the scroll behavior of a ScrollViewer part.
Check out Morten Nielsen's article on Building A Multi-Touch Photo Viewer Control. It's for Silverlight/Windows Phone, but if you just enable manipulations on the image and change a few types in manipulation events - it should work great.
A simple solution that might be enough for you is to just put the image in a ScrollViewer, although to see it working - you need a touch screen or run it in a simulator (use the pinch tool, then drag and scroll on the image to zoom in/out).
You can also zoom it with code:
<Grid
Background="{StaticResource ApplicationPageBackgroundBrush}">
<ScrollViewer
x:Name="myScrollViewer">
<Image
Source="/Assets/SplashScreen.png" />
</ScrollViewer>
</Grid>
.
public BlankPage()
{
this.InitializeComponent();
myScrollViewer.ZoomMode = ZoomMode.Enabled; // default
Test();
}
private async void Test()
{
while (true)
{
for (double x = 0; x < 2 * Math.PI; x += Math.PI / 30)
{
await Task.Delay(1000 / 30);
float factor = (float)(1.0 + Math.Sin(x) / 10);
myScrollViewer.ZoomToFactor(factor);
}
}
}