While looking for ways to solve the problem of MAUI applications having a grey title bar on Windows, I managed to make the actual, accent-color-respecting title bar reappear by adding a Win32 subclass that intercepts WM_NCCALCIZE and passes it to DefWindowProc. Unfortunately, the grey fake title bar added by WinUI3 is still there, which means I have two title bars now (plus the Shell's navigation bar):
I tried the proposed fix of setting ExtendsContentIntoTitleBar and calling SetTitleBar on the WinUI Window:
var myTitleBar = new Microsoft.UI.Xaml.Controls.TextBlock() {
Name="DummyTitleBar",
Text="Dummy title bar"
};
winuiContentContainer.Children.Add(myTitleBar);
winuiWindow.ExtendsContentIntoTitleBar = true;
winuiWindow.SetTitleBar(myTitleBar);
Unfortunately, instead of replacing the grey title bar with the dummy UIElement (that I planned to later swap for something like a 1-pixel line), it merely draws the element over the grey fake title bar:
I need a way to make the grey fake title bar disappear for good (or at least significantly reduce its height) without harming the real title bar, or cover it with the Shell. Only on Windows, of course.
Edit: To reiterate from the other question, I'm on Windows 10, so I can't use AppWindow.TitleBar which works only on Windows 11.
I covered the default title bar by setting the appwindow in the maui project. You can put the following code in the MainPage.cs:
protected override void OnHandlerChanged()
{
base.OnHandlerChanged();
#if WINDOWS
var uiSettings = new Windows.UI.ViewManagement.UISettings();
var color = uiSettings.GetColorValue(Windows.UI.ViewManagement.UIColorType.AccentLight1);
Microsoft.UI.Xaml.Window window = (Microsoft.UI.Xaml.Window)App.Current.Windows.First<Window>().Handler.PlatformView;
IntPtr windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(window);
Microsoft.UI.WindowId windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(windowHandle);
Microsoft.UI.Windowing.AppWindow appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);
appWindow.Title = "this is title";
Microsoft.UI.Windowing.AppWindowTitleBar titlebar = appWindow.TitleBar;
titlebar.BackgroundColor = color;
titlebar.ButtonBackgroundColor = color;
#endif
}
Related
I am trying to code a text editor from scratch in C++ using Qt/QML. For drawing the text I use a Canvas with a Context2D , which looks roughly like this:
function drawString(text, x, y, font) {
var ctx = getContext("2d");
ctx.font = font;
ctx.fillStyle = "black";
ctx.fillText(qsTr(text), x, y);
ctx.stroke();
}
In order to graphically represent a selected area, I want to invert the selecion, for instance place a black rectangle over an area and make the text white.
For this I will use ctx.globalCompositeOperation = "xor"
So the problem I ran into is: when I draw a text with the function above in black, and then afterwards paint the same text in the same location in white I would expect this canvas to be white again. Instead there is still some kind of outline of the text visible (like there is a shadow).
I already tried switching off all shadow parameters but it didn't solve my problem.
Here is a screenshot so you get a better idea of what it looks like:
Nevermind, I found the problem myself. The antialiasing property was set to true, which caused the effect. By setting it to false the text doesn't look as pretty but the shadow is gone.
I'm designing a UI in Xamarin.Forms to collect feedback from users about our application. There is an Editor control at the bottom of this page. On an iPhone 4S, and in many landscape orientations, the keyboard completely obscures this editor control. On Android, this is not a big deal because the OS automatically scrolls (though the sizing behavior is a little weird.) On iOS, the only things resembling solutions are very wonky.
In native iOS, the solution is simple: wrap your views in a UIScrollView, then when the keyboard appears add that much space to the content size and scroll appropriately. Xamarin doesn't expose anything to control the scroll position in ScrollView, and ContentSize is private, so that's out. A few posts (here and here) seem to indicate ScrollView is at least part of the solution. It does appear Xamarin has some automatic scrolling behavior, but it's... curious.
My layout is fairly simple:
At the top, a fixed navigation bar that I do not want to scroll out of view.
Beneath that, a 180px tall image that represents a screenshot of the application.
Beneath that, a label with information such as the timestamp. (2-3 lines of text).
Beneath that, the editor, filling the remaining available space.
I've included code for a layout I've tried at the bottom of my post. I created a StackLayout that contains the image, the label, and the editor. I put that inside a ScrollView. Then, I create a RelativeLayout and place the navigation bar at the top-left with the ScrollView beneath it.
What I want to happen when the Editor is tapped is for the keyboard to be displayed and, if it obscures the Editor, for the layout to be nudged upwards to make the Editor visible. What happens instead is it seems like Xamarin scrolls the layout upwards by the keyboard height plus some margin that looks suspiciously like the keyboard utility bar height. This shoves the Editor upwards so high it's obscured by the navigation bar.
I've tried a lot of different tweaks and I'm at a loss. I can't control enough of the ScrollView to get the behavior I need. I've seen suggestions that use a BoxView resized when the Editor gains focus, but to make it work really well I'd still have to hook into the iOS notifications to get the appropriate size and have a fairly intimate knowledge of where my Editor's bounds are. It feels wrong.
Does anyone else have a solution to this on Xamarin.Forms? Even if I have to dip into native, I'd like an answer.
(Here's an example layout that demonstrates the problem, there's a little bit of weird structure because I was debugging. The funky colors are also a relic of layout debugging.)
using System;
using Xamarin.Forms;
namespace TestScroll
{
public class MainPage : ContentPage {
public MainPage() {
InitializeComponent();
}
private ScrollView _scroller;
protected void InitializeComponent() {
var mainLayout = new RelativeLayout();
var navbar = new Label() {
BackgroundColor = Color.Blue,
TextColor = Color.White,
Text = "I am the Nav Bar",
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.StartAndExpand
};
var subLayout = new ScrollView() {
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand
};
_scroller = subLayout;
var subStack = new StackLayout();
subStack.Spacing = 0;
subLayout.Content = subStack;
var image = new BoxView() {
Color = Color.Green,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.Fill,
HeightRequest = 300
};
subStack.Children.Add(image);
var infoLabel = new Label() {
BackgroundColor = Color.Blue,
TextColor = Color.Black,
Text = "Timestamp!\r\nOther stuff!",
VerticalOptions = LayoutOptions.Start
};
subStack.Children.Add(infoLabel);
var editor = new Editor() {
VerticalOptions = LayoutOptions.FillAndExpand
};
subStack.Children.Add(editor);
mainLayout.Children.Add(navbar,
Constraint.Constant(0),
Constraint.Constant(20),
Constraint.RelativeToParent((parent) => parent.Width),
Constraint.Constant(70));
mainLayout.Children.Add(subLayout,
Constraint.Constant(0),
Constraint.RelativeToView(navbar, (parent, view) => navbar.Bounds.Bottom),
Constraint.RelativeToParent((parent) => parent.Width),
Constraint.RelativeToView(navbar, TestConstraint));
Content = mainLayout;
}
private double TestConstraint(RelativeLayout parent, View view) {
double result = parent.Height - view.Bounds.Height;
Console.WriteLine ("Lower stack height : {0}", result);
Console.WriteLine ("Scroll content size: {0}", _scroller.ContentSize);
return result;
}
}
}
One thing I notice is that you are adding a ScrollView (subLayout) to another ScrollView (_scroller).
Also, I ran into this same problem on iOS except all of my controls were within a Grid. Simply putting the Grid into a single ScrollView fixed the problem, without having to change content sizes or anything like that.
This question sat for a long time unanswered, here's what I did. I don't know that it's the 'answer', and I do appreciate hvaughan3's answer that's currently here and I will try it if I ever get the time.
My page behaved like I wanted on Android, so I didn't do anything specific for that.
So I wrote specific code for iOS that used the notifications UIKeyboardWillShow and UIKeyboardWillHide. These notifications provide information about the bounds the keyboard will take up. So when I get a 'show' notification, I manipulate my layout to allow room for an element of that size I place underneath the keyboard. When I get a 'hide' notification, I reset the layout.
It's janky and a little embarrassing, I hope to come back with news I tried another solution like hvaughan3's and it worked.
Currently I have a project that is being used to draw rooms with lines and images that can be selected by the user by hitting a button representing what they want to add. I.E. if they want a shower a button for shower is pressed and an image appears in a pane. The shower can be resized and moved in the pane. The user also has the ability to use lines to draw objects or walls. The lines can be resized, rotated, or moved. I am now trying to get these objects to interact with each other. Say a user is using lines to make an object, and when the line comes near another object the line being moved snaps to the other object. I have found a 3rd party library that has SnapLineSnapResult but I don't see anything where someone has used it. Is this something that is desktop JavaFX usable, or is it a touch operation and does anyone have code to model or another solution?
SnapLineSnapResult
My code for line that would be useful if I can use this class is as follows:
line.setOnMouseDragged((MouseEvent event1) -> {
// in resize region
if (isInResizeZoneLine(line, event1)) {
// adjust line
line.setEndX(event1.getX());
}
// in movable region
else {
Point2D currentPointer = new Point2D(event1.getX(), event1.getY());
if (bound.getBoundsInLocal().contains(currentPointer)) {
/*--------*/ // potential place for if (near other object to be snapped)
double lineWidth = line.getEndX() - line.getStartX();
line.setStartY(currentPointer.getY());
line.setEndY(currentPointer.getY());
line.setStartX(currentPointer.getX() - lineWidth/2);
line.setEndX(currentPointer.getX() + lineWidth/2);
}
}
});
I want to create a progress bar of which a % of it is filled in with a different color based on some variable. For example 33 % would fill 33 % of the progress bar with a different color and then 40 % would likewise, fill 40 % of it. What is the best way to do this in Actionscript and Flex 3?
The way I've done this in the past is to create a custom progress bar skin, then set the fill to be a gradient that goes the entire length of the bar (even though a smaller portion of the bar actually gets drawn.) Sounds strange to use a gradient for something that has hard stops to the colors, but it's actually pretty easy. You set the stop for the next color right next to an end stop for the previous color. Here's an example where the color changes from green to red at the mid point:
package some.package.skins
{
import flash.display.GradientType;
import flash.geom.Matrix;
import mx.core.UIComponent;
import mx.skins.halo.ProgressBarSkin;
public class ColoredProgressBarSkin extends ProgressBarSkin
{
override protected function updateDisplayList(w:Number, h:Number):void {
super.updateDisplayList(w, h);
graphics.clear();
var fullWidth:int = w;
if (parent != null && (parent as UIComponent).mask != null)
fullWidth = (parent as UIComponent).mask.width;
var matrix:Matrix = new Matrix();
matrix.createGradientBox(fullWidth, h);
var colors:Array = [0x00ff00, 0x00ff00, 0xff0000, 0xff0000];
this.graphics.lineStyle();
this.graphics.beginGradientFill(GradientType.LINEAR, colors, [1,1,1,1], [0,128,128,255], matrix);
this.graphics.drawRoundRect(2, 2, w - 4, h - 4, h - 4);
}
}
}
You then set this skin to the barSkin style on your progress bar, either in CSS or in the tag where you use the progress bar.
Hope that helps.
I had to do this a while back and opted to take the following route:
I built a custom preloader by extending the DownloadProgressBar and then integrated it with this Degrafa component. http://degrafa.org/source/CapacityIndicator/CapacityIndicator.html
To create the custom preloader, I think I used this tute:
http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/
and then created a separate class that was responsible for dynamically adjusting the values in that degrafa component linked above. And then of course in your SWFDownloadProgress function (on the Progress Event), you can adjust those values accordingly.
I found this to be the quickest and a fairly clean way of doing it :)
Good luck!
I have a several chart components that I have created in Flex. Basically I have set up a special UI that allows the user to select which of these charts they want to print. When they press the print button each of the selected charts is created dynamically then added to a container. Then I send this container off to FlexPrintJob.
i.e.
private function prePrint():void
{
var printSelection:Box = new Box();
printSelection.percentHeight = 100;
printSelection.percentWidth = 100;
printSelection.visible = true;
if (this.chkMyChart1.selected)
{
var rptMyChart1:Chart1Panel = new Chart1Panel();
rptMyChart1.percentHeight = 100;
rptMyChart1.percentWidth = 100;
rptMyChart1.visible = true;
printSelection.addChild(rptMyChart1);
}
print(printSelection);
}
private function print(container:Box):void
{
var job:FlexPrintJob;
job = new FlexPrintJob();
if (job.start()) {
job.addObject(container, FlexPrintJobScaleType.MATCH_WIDTH);
job.send();
}
}
This code works fine if the chart is actually displayed somewhere on the page but adding it dynamically as shown above does not. The print dialog will appear but nothing happens when I press OK.
So I really have two questions:
Is it possible to print flex components/charts when they are not visible on the screen?
If so, how do I do it / what am I doing wrong?
UPDATE:
Well, at least one thing wrong is my use of the percentages in the width and height. Using percentages doesn't really make sense when the Box is not contained in another object. Changing the height and width to fixed values actually allows the printing to progress and solves my initial problem.
printSelection.height = 100;
printSelection.width = 100;
But a new problem arises in that instead of seeing my chart, I see a black box instead. I have previously resolved this issue by setting the background colour of the chart to #FFFFFF but this doesn't seem to be working this time.
UPDATE 2:
I have seen some examples on the adobe site that add the container to the application but don't include it in the layout. This looks like the way to go.
i.e.
printSelection.includeInLayout = false;
addChild(printSelection);
Your component has to be on the stage in order to draw its contents, so you should try something like this:
printSelection.visible = false;
application.addChild(printSelection);
printSelection.width = ..;
printSelection.height = ...;
...
then do the printing
i'm not completely sure, but in one of my application I have to print out a complete Tab Navigator and the only method i have found to print it is to automatically scroll the tabnavigator tab in order to show the component on screen when i add them to the printjob.
In this way they are all printed. Before i created the tabnaviagotr scrolling the print (to PDF) result was a file with all the pages of the tab but only the one visible on screen really printed.