Related
I find the grid control to be very messy, counter-intuitive, verboose, and breaking the idea of xml that position in the document is important to layout. I spent a lot of time programming in the Adobe Flex framework and found I was incredibly fast at UI development with that ability, and the UI is way easier to parse later on as well to update and maintain. With that in mind how do we bring the ability to make controls like stackpanel, and button that can tolerate percentage widths and heights?
Documenting this here so it might help someone. I came from Adobe Flex, and using percentage based widths and heights is a breeze and I find the grid control to be messy and ruins half of the point of using XML to define a UI by breaking the layout order and style and adds a lot of code for little value. Here is an example:
<Window xmlns="https://github.com/avaloniaui"
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
xmlns:s="clr-namespace:Sandbox.Spark"
x:Class="Sandbox.MainWindow" Padding="5">
<s:VGroup>
<Border Background="LightBlue" CornerRadius="5" PercentHeight="30" PercentWidth="50">
<Button Content="Test" HorizontalAlignment="Center"/>
</Border>
<Border Background="Green" CornerRadius="5" Height="200" PercentWidth="75" Padding="5">
<s:VGroup>
<Button Content="Test5" PercentWidth="50"/>
<Button Content="Test8"/>
</s:VGroup>
</Border>
<Border Background="LightGray" CornerRadius="5" PercentHeight="100" PercentWidth="100">
<s:HGroup>
<Button Content="Test2"/>
<Button Content="Test3"/>
</s:HGroup>
</Border>
</s:VGroup>
</Window>
I Created the classes Group, VGroup, and HGroup, which are similar to StackPanel's but better suited to dealing with percentage based layout. Here they are:
/// <summary>
/// A Panel control similar to StackPanel but with greater support for PercentWidth and PercentHeight
/// </summary>
public class Group : Panel
{
public static readonly StyledProperty<Orientation> OrientationProperty = AvaloniaProperty.Register<Group, Orientation>(
"Orientation", Orientation.Vertical);
public Orientation Orientation
{
get => GetValue(OrientationProperty);
set => SetValue(OrientationProperty, value);
}
public static readonly StyledProperty<double> GapProperty = AvaloniaProperty.Register<Group, double>(
"Gap", 10);
public double Gap
{
get => GetValue(GapProperty);
set => SetValue(GapProperty, value);
}
protected override Size MeasureOverride(Size availableSize)
{
return GroupUtils.Measure(availableSize, Children, Orientation, Gap);
}
protected override Size ArrangeOverride(Size finalSize)
{
return GroupUtils.ArrangeGroup(finalSize, Children, Orientation, Gap);
}
}
public class VGroup : Panel
{
public static readonly StyledProperty<double> GapProperty = AvaloniaProperty.Register<Group, double>(
"Gap", 10);
public double Gap
{
get => GetValue(GapProperty);
set => SetValue(GapProperty, value);
}
protected override Size MeasureOverride(Size availableSize)
{
return GroupUtils.Measure(availableSize, Children, Orientation.Vertical, Gap);
}
protected override Size ArrangeOverride(Size finalSize)
{
return GroupUtils.ArrangeGroup(finalSize, Children, Orientation.Vertical, Gap);
}
}
public class HGroup : Panel
{
public static readonly StyledProperty<double> GapProperty = AvaloniaProperty.Register<Group, double>(
"Gap", 10);
public double Gap
{
get => GetValue(GapProperty);
set => SetValue(GapProperty, value);
}
protected override Size MeasureOverride(Size availableSize)
{
return GroupUtils.Measure(availableSize, Children, Orientation.Horizontal, Gap);
}
protected override Size ArrangeOverride(Size finalSize)
{
return GroupUtils.ArrangeGroup(finalSize, Children, Orientation.Horizontal, Gap);
}
}
public static class GroupUtils
{
public static Size Measure(Size availableSize, Controls children, Orientation orientation, double gap)
{
Size layoutSlotSize = availableSize;
Size desiredSize = new Size();
bool hasVisibleChild = false;
//In order to handle percentwidth and percentheight scenario's we first have to measure all the children to determine their constrained measurement
//then depending on the orientation we factor in the left over space available and split that up via the percentages and orientation
//we use the measure with the true override to force the child to take our supplied size instead of it's default constrained size
var percentHeightChildrenMap = new Dictionary<Layoutable, double>();
var percentWidthChildrenMap = new Dictionary<Layoutable, double>();
//loop through all children and determine constrained size and check if percent height is set
for (int i = 0, count = children.Count; i < count; ++i)
{
// Get next child.
var child = children[i];
if (child == null) { continue; }
bool isVisible = child.IsVisible;
if (isVisible && !hasVisibleChild)
{
hasVisibleChild = true;
}
if (!double.IsNaN(child.PercentHeight))
{
percentHeightChildrenMap[child] = child.PercentHeight;
}
if (!double.IsNaN(child.PercentWidth))
{
percentWidthChildrenMap[child] = child.PercentWidth;
}
// Measure the child.
child.Measure(layoutSlotSize);
var childDesiredSize = child.DesiredSize;
if (orientation == Orientation.Vertical)
{
//in vertical mode, our width is the max width of the children
desiredSize = desiredSize.WithWidth(Math.Max(desiredSize.Width, childDesiredSize.Width));
//our height is the combine height of the children
desiredSize = desiredSize.WithHeight(desiredSize.Height + (isVisible ? gap : 0) + childDesiredSize.Height);
}
else
{
//in horizontal mode, our height is the max height of the children
desiredSize = desiredSize.WithHeight(Math.Max(desiredSize.Height, childDesiredSize.Height));
//our height is the combine width of the children
desiredSize = desiredSize.WithWidth(desiredSize.Width + (isVisible ? gap : 0) + childDesiredSize.Width);
}
}
if (orientation == Orientation.Vertical)
{
//Handle percent width
foreach (var child in children)
{
if (!double.IsNaN(child.PercentWidth))
{
child.InvalidateMeasure();
child.Measure(child.DesiredSize.WithWidth(child.PercentWidth * 0.01 * availableSize.Width), true);
desiredSize = desiredSize.WithWidth(Math.Max(desiredSize.Width, child.DesiredSize.Width));
}
}
//if we have dont have a visible child then set to 0, otherwise remove the last added gap
desiredSize = desiredSize.WithHeight(desiredSize.Height - (hasVisibleChild ? gap : 0));
if (hasVisibleChild && percentHeightChildrenMap.Count > 0)
{
//for those with percent height set, combine the percent heights together and if above 100, find the scale factor
var totalPercentHeight = percentHeightChildrenMap.Sum(v => v.Value);
totalPercentHeight = totalPercentHeight <= 0 ? 1 : totalPercentHeight;
var scaleRatio = 1 / (totalPercentHeight / 100);
//the available size leftover after the non-percent height children is now used to calculate the percentheight children sizes
var availableHeight = availableSize.Height - desiredSize.Height;
Debug.WriteLine($"Remapping %Height Children, availableHeight: {availableHeight}, scaleRatio: {scaleRatio}" );
foreach (var child in percentHeightChildrenMap.Keys)
{
var originalHeight = child.DesiredSize.Height;
var percentHeight = percentHeightChildrenMap[child];
var heightIncrease = availableHeight * percentHeight * scaleRatio * 0.01;
var recalculatedHeight = child.DesiredSize.Height + heightIncrease;
child.InvalidateMeasure();
child.Measure(child.DesiredSize.WithHeight(recalculatedHeight), true);
desiredSize = desiredSize.WithHeight(desiredSize.Height + child.DesiredSize.Height - originalHeight);
Debug.WriteLine($"$Found Child Height %:{percentHeight}, Original Height: {originalHeight}, New: {recalculatedHeight}" );
}
}
}
else
{
//Handle percent height
foreach (var child in children)
{
if (!double.IsNaN(child.PercentHeight))
{
child.InvalidateMeasure();
child.Measure(child.DesiredSize.WithHeight(child.PercentHeight * 0.01 * availableSize.Height), true);
desiredSize = desiredSize.WithHeight(Math.Max(desiredSize.Height, child.DesiredSize.Height));
}
}
//if we have dont have a visible child then set to 0, otherwise remove the last added gap
desiredSize = desiredSize.WithWidth(desiredSize.Width - (hasVisibleChild ? gap : 0));
if (hasVisibleChild && percentWidthChildrenMap.Count > 0)
{
//for those with percent Width set, combine the percent Widths together and if above 100, find the scale factor
var totalPercentWidth = percentWidthChildrenMap.Sum(v => v.Value);
totalPercentWidth = totalPercentWidth <= 0 ? 1 : totalPercentWidth;
var scaleRatio = 1 / (totalPercentWidth / 100);
//the available size leftover after the non-percent height children is now used to calculate the percentheight children sizes
var availableWidth = availableSize.Width - desiredSize.Width;
Debug.WriteLine($"Remapping %Width Children, availableWidth: {availableWidth}, scaleRatio: {scaleRatio}" );
foreach (var child in percentWidthChildrenMap.Keys)
{
var originalWidth = child.DesiredSize.Width;
var percentWidth = percentWidthChildrenMap[child];
var widthIncrease = availableWidth * percentWidth * scaleRatio * 0.01;
var recalculatedWidth = child.DesiredSize.Width + widthIncrease;
child.InvalidateMeasure();
child.Measure(child.DesiredSize.WithWidth(recalculatedWidth), true);
desiredSize = desiredSize.WithWidth(desiredSize.Width + child.DesiredSize.Width - originalWidth);
Debug.WriteLine($"$Found Child Width %:{percentWidth}, Original Width: {originalWidth}, New: {recalculatedWidth}" );
}
}
}
return desiredSize;
}
public static Size ArrangeGroup(Size finalSize, Controls children, Orientation orientation, double gap)
{
bool fHorizontal = (orientation == Orientation.Horizontal);
Rect rcChild = new Rect(finalSize);
double previousChildSize = 0.0;
var spacing = gap;
//
// Arrange and Position Children.
//
for (int i = 0, count = children.Count; i < count; ++i)
{
var child = children[i];
if (child == null || !child.IsVisible)
{
continue;
}
if (fHorizontal)
{
rcChild = rcChild.WithX(rcChild.X + previousChildSize);
previousChildSize = child.DesiredSize.Width;
rcChild = rcChild.WithWidth(previousChildSize);
rcChild = rcChild.WithHeight(child.DesiredSize.Height);
previousChildSize += spacing;
}
else
{
rcChild = rcChild.WithY(rcChild.Y + previousChildSize);
previousChildSize = child.DesiredSize.Height;
rcChild = rcChild.WithHeight(previousChildSize);
rcChild = rcChild.WithWidth(child.DesiredSize.Width);
previousChildSize += spacing;
}
child.Arrange(rcChild);
}
return finalSize;
}
}
Finally I had to make a change in the avalonia source class Layoutable
adding
public static readonly StyledProperty<double> PercentWidthProperty = AvaloniaProperty.Register<Layoutable, double>(
"PercentWidth", Double.NaN);
public static readonly StyledProperty<double> PercentHeightProperty = AvaloniaProperty.Register<Layoutable, double>(
"PercentHeight", Double.NaN);
public double PercentHeight
{
get => GetValue(PercentHeightProperty);
set => SetValue(PercentHeightProperty, value);
}
public double PercentWidth
{
get => GetValue(PercentWidthProperty);
set => SetValue(PercentWidthProperty, value);
}
Registering the properties in the constructor for layoutable such as
static Layoutable()
{
AffectsMeasure<Layoutable>(
WidthProperty,
HeightProperty,
MinWidthProperty,
MaxWidthProperty,
MinHeightProperty,
MaxHeightProperty,
MarginProperty,
**PercentHeightProperty,
PercentWidthProperty,**
HorizontalAlignmentProperty,
VerticalAlignmentProperty);
}
and modifying the measure method to accept a boolean 2nd parameter that tells the measure to use all available space and then uses the percentage calculation:
public void Measure(Size availableSize, bool useAvailable = false)
{
if (double.IsNaN(availableSize.Width) || double.IsNaN(availableSize.Height))
{
throw new InvalidOperationException("Cannot call Measure using a size with NaN values.");
}
if (!IsMeasureValid || _previousMeasure != availableSize)
{
var previousDesiredSize = DesiredSize;
var desiredSize = default(Size);
IsMeasureValid = true;
try
{
_measuring = true;
desiredSize = MeasureCore(availableSize);
//used in percentwidth height layout system
if (useAvailable == true)
{
desiredSize = desiredSize.WithHeight(Math.Max(availableSize.Height, desiredSize.Height))
.WithWidth(Math.Max(availableSize.Width, desiredSize.Width));
}
}
finally
{
_measuring = false;
}
if (IsInvalidSize(desiredSize))
{
throw new InvalidOperationException("Invalid size returned for Measure.");
}
DesiredSize = desiredSize;
_previousMeasure = availableSize;
Logger.TryGet(LogEventLevel.Verbose, LogArea.Layout)?.Log(this, "Measure requested {DesiredSize}", DesiredSize);
if (DesiredSize != previousDesiredSize)
{
this.GetVisualParent<Layoutable>()?.ChildDesiredSizeChanged(this);
}
}
}
I'd suggest reading the documentation when picking up a new UI tech. The worst thing you can do is try to bend a new technology to the way another unrelated technology works.
Particularly when what you need already exists.
50% / 50% columns ...
<Grid ColumnDefinitions="1*, 1*">
<Border Grid.Column="0" Background="Red" />
<Border Grid.Column="1" Background="Blue" />
</Grid>
25% / 75%
<Grid ColumnDefinitions="1*, 3*">
<Border Grid.Column="0" Background="Red" />
<Border Grid.Column="1" Background="Blue" />
</Grid>
You typically don't set heights and widths on controls. You define the space they have on the UI and allow them to adapt. Some controls might have a default height in a style that's applied globally.
Try to think in XAML terms when using XAML and Adobe terms when using Adobe. Mixing the two will self-inflict a lot of pain.
I'd advise anyone else finding this question to not use this percentage approach.
What is the best way to go about resetting state variables, using a button. I've tried a load of different funcs but none work.
I'm trying to use this button:
primaryButton: .destructive(Text("Delete")) {
Code
},secondaryButton:
.cancel()
To reset these State variables:
#State var statsValue1 = 0
#State var statsValue2 = 0
#State var statsValue3 = 0
#State var statsValue4 = 0
#State var statsValue5 = 0
#State var statsValue6 = 0
(which are in the main content view)
How about using a view model, the #Published property wrapper notifies about any changes of the model and the reset function creates a new instance
struct Model {
var value1 = 0
var value2 = 0
var value3 = 0
}
class ViewModel : ObservableObject {
#Published var model = Model()
func reset() {
model = Model()
}
}
and a simple test logic in the content view
struct ContentView : View {
#StateObject var viewModel = ViewModel()
var body : some View {
VStack(spacing: 20) {
Text("Value 1: \(viewModel.model.value1)")
Text("Value 2: \(viewModel.model.value2)")
Text("Value 3: \(viewModel.model.value3)")
Divider()
Button ( "Delete", role: .destructive, action: viewModel.reset )
Button { viewModel.model.value1 += 1 } label: { Text("Increment value 1") }
Button { viewModel.model.value2 += 1 } label: { Text("Increment value 2") }
Button { viewModel.model.value3 += 1 } label: { Text("Increment value 3") }
}
}
}
I've been trying out Tornadofx. trying to create a custom title-bar, here's the code I'm currently trying
fun main(args: Array<String>) {
launch<MyApp>(args)
}
class MyApp : App(Title::class) {
override fun start(stage: Stage) {
stage.initStyle(StageStyle.UNDECORATED)
stage.minWidth = 600.0
stage.minHeight = 450.0
stage.isMaximized = false
super.start(stage)
}
}
class Title : View() {
private var xOffset = 0.0
private var yOffset = 0.0
private var screenBounds: Rectangle2D = Screen.getPrimary().visualBounds
private var originalBounds: Rectangle2D = Rectangle2D.EMPTY
init {
primaryStage.isMaximized = false
}
override val root = borderpane {
onMousePressed = EventHandler { ev ->
xOffset = primaryStage.x - ev.screenX
yOffset = primaryStage.y - ev.screenY
}
onMouseDragged = EventHandler { ev ->
primaryStage.x = xOffset + ev.screenX
primaryStage.y = yOffset + ev.screenY
}
center = label("Forms")
right = hbox {
button("Mi") {
action {
with(primaryStage) { isIconified = true }
}
}
button("Ma") {
action {
if (primaryStage.isMaximized) {
with(primaryStage) {
x = originalBounds.minX
y = originalBounds.minY
width = originalBounds.width
height = originalBounds.height
isMaximized = false
}
text = "Ma"
} else {
with(primaryStage) {
originalBounds = Rectangle2D(x, y, width, height)
x = screenBounds.minX
y = screenBounds.minY
width = screenBounds.width
height = screenBounds.height
isMaximized = true
}
text = "Re"
}
}
}
button("X") {
action {
app.stop()
println("exiting")
exitProcess(0)
}
}
}
}
}
the following work without problems
close
maximize, restore
restored window minimized, then open from taskbar
but when a maximized window is minimized to taskbar, then open from taskbar, it goes full screen(taskbar is hidden)
how do i fix this behavior, is there any part of my code that is wrong, needs change, or in need of any inclusions?
my configuration is Windows 10 64bit, Java 11.0.2, Kotlin 1.4.21, JavaFx 11.0.2, TornadoFx 1.7.20
I think this is a general problem in JavaFX (I mean not specific with TornadoFX).
The root cause for this is because of setting the maximized property of stage to true. Not sure what JavaFX internally does, but when you open the window from task bar and if the maximized value is true, then it renders in full screen mode.
You can fix this in two ways.
Approach #1:
When the window is opened from task bar, the iconfied property will turn off, set the stage dimensions again to screen bounds if maximized is true.
primaryStage.iconifiedProperty().addListener((obs,old,iconified)->{
if(!iconified && primaryStage.isMaximized()){
primaryStage.setWidth(screenBounds.getWidth());
primaryStage.setHeight(screenBounds.getHeight());
}
});
Approach #2:
Don't rely on the maximized property of the Stage. I believe you need that property to toggle the window dimensions. So instead maintain a instance variable to handle that.
boolean maximized = false;
ma.setOnAction(e -> {
if (maximized) {
// Set stage to original bounds
maximized = false;
ma.setText("Ma");
} else {
// Set stage to screen bounds
maximized = false;
ma.setText("Re");
}
});
A full working demo is below with both the approaches. You can decide which way to go based on your other requirments.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class UndecoratedWindowFullScreenDemo extends Application {
private double xOffset = 0.0;
private double yOffset = 0.0;
private Rectangle2D screenBounds = Screen.getPrimary().getVisualBounds();
private Rectangle2D originalBounds = Rectangle2D.EMPTY;
private boolean maximized = false;
#Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
root.setStyle("-fx-background-color:pink;");
Scene scene = new Scene(root, 600, 450);
primaryStage.setScene(scene);
Label label = new Label("Forums");
Button mi = new Button("Mi");
Button ma = new Button("Ma");
Button x = new Button("X");
HBox pane = new HBox(mi, ma, x);
pane.setPadding(new Insets(3));
pane.setSpacing(5);
root.setCenter(label);
root.setRight(pane);
primaryStage.initStyle(StageStyle.UNDECORATED);
primaryStage.setMinWidth(600);
primaryStage.setMinHeight(450);
primaryStage.setMaximized(false);
primaryStage.show();
root.setOnMousePressed(e -> {
xOffset = primaryStage.getX() - e.getScreenX();
yOffset = primaryStage.getY() - e.getScreenY();
});
root.setOnMouseDragged(e -> {
primaryStage.setX(xOffset + e.getScreenX());
primaryStage.setY(yOffset + e.getScreenY());
});
mi.setOnAction(e -> primaryStage.setIconified(true));
/* Use this approach if you want to go with the Stage maximized property */
// approach1(primaryStage, ma);
/* Use this approach if you want to avoid Stage maximized property and maintain a instance variable */
approach2(primaryStage, ma);
}
private void approach1(Stage primaryStage, Button ma) {
primaryStage.iconifiedProperty().addListener((obs, old, iconified) -> {
if (!iconified && primaryStage.isMaximized()) {
primaryStage.setWidth(screenBounds.getWidth());
primaryStage.setHeight(screenBounds.getHeight());
}
});
ma.setOnAction(e -> {
if (primaryStage.isMaximized()) {
primaryStage.setX(originalBounds.getMinX());
primaryStage.setY(originalBounds.getMinY());
primaryStage.setWidth(originalBounds.getWidth());
primaryStage.setHeight(originalBounds.getHeight());
primaryStage.setMaximized(false);
ma.setText("Ma");
} else {
originalBounds = new Rectangle2D(primaryStage.getX(), primaryStage.getY(), primaryStage.getWidth(), primaryStage.getHeight());
primaryStage.setX(screenBounds.getMinX());
primaryStage.setY(screenBounds.getMinY());
primaryStage.setWidth(screenBounds.getWidth());
primaryStage.setHeight(screenBounds.getHeight());
primaryStage.setMaximized(true);
ma.setText("Re");
}
});
}
private void approach2(Stage primaryStage, Button ma) {
ma.setOnAction(e -> {
if (maximized) {
primaryStage.setX(originalBounds.getMinX());
primaryStage.setY(originalBounds.getMinY());
primaryStage.setWidth(originalBounds.getWidth());
primaryStage.setHeight(originalBounds.getHeight());
maximized = false;
ma.setText("Ma");
} else {
originalBounds = new Rectangle2D(primaryStage.getX(), primaryStage.getY(), primaryStage.getWidth(), primaryStage.getHeight());
primaryStage.setX(screenBounds.getMinX());
primaryStage.setY(screenBounds.getMinY());
primaryStage.setWidth(screenBounds.getWidth());
primaryStage.setHeight(screenBounds.getHeight());
maximized = true;
ma.setText("Re");
}
});
}
}
There are two changes that were needed to solve the problem
The actual problem was that if isMaximized is set to true the app goes full screen when being open from task(minimized) even though isFullScreen property is separately available
Adding a maximized property listener so that we can invalidate if the isMaximized were to be ever modified by other means(like double clicking on title bar in Linux etc)
// CHANGE 1
stage.maximizedProperty().addListener { _, _, newValue ->
if (newValue) stage.isMaximized = false
}
by having a separate maximized instead of using isMaximized
// CHANGE 2
private var maximized: Boolean = false // <- here
if (maximized) { // <- here
// restore the window by setting bounds of original size
maximized = false // <- here
text = "Ma"
} else {
// maximize window by setting bounds from screen size
maximized = true // <- and here
text = "Re"
}
Bonus : use isFocusTraversable = false to make buttons that don't focus with keyboard traversal
Final solution
fun main(args: Array<String>) {
launch<MyApp>(args)
}
class MyApp : App(Window::class, Styles::class) {
override fun start(stage: Stage) {
stage.initStyle(StageStyle.UNDECORATED)
stage.minWidth = 600.0
stage.minHeight = 450.0
stage.width = 600.0
stage.height = 450.0
// CHANGE 1
stage.maximizedProperty().addListener { _, _, newValue ->
if (newValue) stage.isMaximized = false
}
stage.isMaximized = false
super.start(stage)
}
}
class Window : View() {
override val root = borderpane {
top = Title().root
}
}
class Title : View() {
// CHANGE 2
private var maximized: Boolean = false // <- here
private var xOffset = 0.0
private var yOffset = 0.0
private var screenBounds: Rectangle2D = Screen.getPrimary().visualBounds
private var originalBounds: Rectangle2D = Rectangle2D.EMPTY
init {
primaryStage.isMaximized = false
}
override val root = hbox {
hgrow = Priority.ALWAYS
onMousePressed = EventHandler { ev ->
xOffset = primaryStage.x - ev.screenX
yOffset = primaryStage.y - ev.screenY
}
onMouseDragged = EventHandler { ev ->
primaryStage.x = xOffset + ev.screenX
primaryStage.y = yOffset + ev.screenY
}
val l1 = hbox {
hgrow = Priority.ALWAYS
alignment = Pos.CENTER
label("Forms")
}
add(l1)
l1.requestFocus()
button("Mi") {
id = "min"
action {
with(primaryStage) { isIconified = true }
}
isFocusTraversable = false
}
button("Ma") {
id = "max"
action {
if (maximized) { // <- here
with(primaryStage) {
x = originalBounds.minX
y = originalBounds.minY
width = originalBounds.width
height = originalBounds.height
maximized = false // <- here
}
text = "Ma"
} else {
with(primaryStage) {
originalBounds = Rectangle2D(x, y, width, height)
x = screenBounds.minX
y = screenBounds.minY
width = screenBounds.width
height = screenBounds.height
maximized = true // <- and here
}
text = "Re"
}
l1.requestFocus()
}
isFocusTraversable = false
}
button("X") {
id = "close"
action {
app.stop()
println("exiting")
exitProcess(0)
}
isFocusTraversable = false
}
}
}
It is not about how to show notification badges nor it's about to show toolbar item icon. It is clear question that how to show a badges count on a toolbar item icon. ?
I am sharing code to create ToolbarItem with icon in XF content page:
In cs File:
ToolbarItem cartItem = new ToolbarItem();
scanItem.Text = "My Cart";
scanItem.Order = ToolbarItemOrder.Primary;
scanItem.Icon = "carticon.png";
ToolbarItems.Add(cartItem );
In Xaml File:
<ContentPage.ToolbarItems>
<ToolbarItem Text="Cart" Priority="0" x:Name="menu1">
</ToolbarItem>
</ContentPage.ToolbarItems>
Now I want to Place a badge count on the above added tool bar item icon. How it can be achieved ?
Placing badge icon's in the native toolbars is actually more effort than its worth. If I need a badge icon, I remove the navigation page.
NavigationPage.SetHasNavigationBar(myPageInstance, false);
Then I create my own toolbar from scratch. In this toolbar, I can overlay an image in there, you can also place a number in it as needed. For example.
<Grid>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding IconCommand}" />
</Grid.GestureRecognizers>
<iconize:IconImage
Icon="fa-drawer"
IconColor="white"
IconSize="20" />
<Grid Margin="15,-15,0,0">
<iconize:IconImage Grid.Row="0"
HeightRequest="40"
WidthRequest="40"
Icon="fa-circle"
IconColor="red"
IsVisible="{Binding IsCircleVisible}"
IconSize="10" />
</Grid>
</Grid>
I use Iconize wtih FontAwesome for the icons
With the help of Xamarin Forum Discussion, I have achieved it. Read ad understand the complete discussion before implement it. Thank you "Slava Chernikoff", "Emanuele Sabetta", "Mirza Sikander", "Satish" to discuss and yours share code.
Setp 1: Create a Helper Class in PCL and install NGraphics package from nugget.
public class CartIconHelper
{
private static Graphic _svgGraphic = null;
public const string ResourcePath = "ToolBarAndroidBadge.Resources.cartIcon.svg";
private static PathOp[] RoundRect(NGraphics.Rect rect, double radius)
{
return new PathOp[]
{
new NGraphics.MoveTo(rect.X + radius, rect.Y),
new NGraphics.LineTo(rect.X + rect.Width - radius, rect.Y),
new NGraphics.ArcTo(new NGraphics.Size(radius, radius), true, false, new NGraphics.Point(rect.X + rect.Width, rect.Y + radius)),
new NGraphics.LineTo(rect.X + rect.Width, rect.Y + rect.Height - radius),
new NGraphics.ArcTo(new NGraphics.Size(radius, radius), true, false, new NGraphics.Point(rect.X + rect.Width - radius, rect.Y + rect.Height)),
new NGraphics.LineTo(rect.X + radius, rect.Y + rect.Height),
new NGraphics.ArcTo(new NGraphics.Size(radius, radius), true, false, new NGraphics.Point(rect.X, rect.Y + rect.Height - radius)),
new NGraphics.LineTo(rect.X, rect.Y + radius), new NGraphics.ArcTo(new NGraphics.Size(radius, radius), true, false, new NGraphics.Point(rect.X + radius, rect.Y)),
new NGraphics.ClosePath()
};
}
public static string DrawCartIcon(int count, string path, double iconSize = 30, double scale = 2, string fontName = "Arial", double fontSize = 12, double textSpacing = 4)
{
var service = DependencyService.Get<IService>();
var canvas = service.GetCanvas();
if (_svgGraphic == null) using (var stream = typeof(CartIconHelper).GetTypeInfo().Assembly.GetManifestResourceStream(path))
_svgGraphic = new SvgReader(new StreamReader(stream)).Graphic;
//st = ReadFully(stream);
var minSvgScale = Math.Min(canvas.Size.Width / _svgGraphic.Size.Width, canvas.Size.Height / _svgGraphic.Size.Height) / 1.15;
var w = _svgGraphic.Size.Width / minSvgScale;
var h = _svgGraphic.Size.Height / minSvgScale;
_svgGraphic.ViewBox = new NGraphics.Rect(0, -14, w, h);
_svgGraphic.Draw(canvas);
if (count > 0)
{
var text = count > 99 ? "99+" : count.ToString();
var font = new NGraphics.Font(fontName, fontSize);
var textSize = canvas.MeasureText(text, font);
var textRect = new NGraphics.Rect(canvas.Size.Width - textSize.Width - textSpacing, textSpacing, textSize.Width, textSize.Height);
if (count < 10)
{
var side = Math.Max(textSize.Width, textSize.Height);
var elipseRect = new NGraphics.Rect(canvas.Size.Width - side - 2 * textSpacing, 0, side + 2 * textSpacing, side + 2 * textSpacing);
canvas.FillEllipse(elipseRect, NGraphics.Colors.Red);
textRect -= new NGraphics.Point(side - textSize.Width, side - textSize.Height) / 2.0;
}
else
{
var elipseRect = new NGraphics.Rect(textRect.Left - textSpacing, textRect.Top - textSpacing, textRect.Width + 2 * textSpacing, textSize.Height + 2 * textSpacing);
canvas.FillPath(RoundRect(elipseRect, 6), NGraphics.Colors.Red);
}
var testReact1= new NGraphics.Rect(20,12,0,0);
// canvas.DrawText(text, textRect + new NGraphics.Point(0, textSize.Height), font, NGraphics.TextAlignment.Center, NGraphics.Colors.Black);
canvas.DrawText("5", testReact1, font, NGraphics.TextAlignment.Left, NGraphics.Colors.White);
}
service.SaveImage(canvas.GetImage());
string imagePath = service.GetImage();
return imagePath;
// return st;
}
}
Step 2: Create a interface to IService in PCL
public interface IService
{
IImageCanvas GetCanvas();
void SaveImage(NGraphics.IImage image);
string GetImage();
}
Step 3 : Implement this interface in your Android project
class CanvasServices:IService
{
private readonly AndroidPlatform _platform;
public CanvasServices()
{
_platform = new AndroidPlatform();
}
public void SaveImage(IImage image)
{
var dir = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);
var filePath = System.IO.Path.Combine(dir, "cart.png");
var stream = new FileStream(filePath, FileMode.Create);
image.SaveAsPng(stream);
//bitmap.Compress(image., 100, stream);
stream.Close();
}
public string GetImage()
{
var dir = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);
var filePath = System.IO.Path.Combine(dir, "cart.png");
using (var streamReader = new StreamReader(filePath))
{
string content = streamReader.ReadToEnd();
System.Diagnostics.Debug.WriteLine(content);
}
return filePath;
}
public IImageCanvas GetCanvas()
{
NGraphics.Size size = new NGraphics.Size(30);
return _platform.CreateImageCanvas(size);
}
public NGraphics.AndroidPlatform GetPlatform()
{
return _platform;
}
}
Setp 4: Now, use CartIcon Helper in your PCL project to show badges in TabBarItem.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var imagePath = CartIconHelper.DrawCartIcon(2, "ToolBarAndroidBadge.Resources.cartIcon.svg");
string deviceSepecificFolderPath = Device.OnPlatform(null, imagePath, null);
object convertedObject = new FileImageSourceConverter().ConvertFromInvariantString(deviceSepecificFolderPath);
FileImageSource fileImageSource = (FileImageSource)convertedObject;
ToolbarItem cartItem = new ToolbarItem();
cartItem.Text = "My Cart";
cartItem.Order = ToolbarItemOrder.Primary;
cartItem.Icon = fileImageSource;
ToolbarItems.Add(cartItem);
}
}
For any one who wants to add badge on toolbar item using custom ui try,
Instead of using default toolbar item, you can hide the default navigation bar by NavigationPage.SetHasNavigationBar(this, false);
in the constructor.
Then prepare the custom navigation bar with toolbar item with badge as mentioned in above answers.
If you are using master detail page, hiding default navigation bar will hide hamburger icon, so need to slide from left to see sliding menu. Alternate method would be place a button with hamburger icon in custom navigation bar, on button click use messaging center to present the sliding menu.
Example: On page in which hamburger button is clicked
private void Button_Clicked(object sender, System.EventArgs e)
{
MessagingCenter.Send(this, "presnt");
}
On MasterDetail page
MessagingCenter.Subscribe<YourPage>(this, "presnt", (sender) =>
{
IsPresented = true;
});
Before making IsPresented=true, check for sliding menu is not all-ready presented.
Check https://github.com/LeslieCorrea/Xamarin-Forms-Shopping-Cart for badge on toolbar item.
Implement below code to draw a ground circle with text over toolbar icon
BarButtonItemExtensions.cs
using CoreAnimation;
using CoreGraphics;
using Foundation;
using ObjCRuntime;
using System;
using System.Linq;
using System.Runtime.InteropServices;
using UIKit;
namespace TeamCollaXform.Views.Services
{
public static class BarButtonItemExtensions
{
enum AssociationPolicy
{
ASSIGN = 0,
RETAIN_NONATOMIC = 1,
COPY_NONATOMIC = 3,
RETAIN = 01401,
COPY = 01403,
}
static NSString BadgeKey = new NSString(#"BadgeKey");
[DllImport(Constants.ObjectiveCLibrary)]
static extern void objc_setAssociatedObject(IntPtr obj, IntPtr key, IntPtr value, AssociationPolicy policy);
[DllImport(Constants.ObjectiveCLibrary)]
static extern IntPtr objc_getAssociatedObject(IntPtr obj, IntPtr key);
static CAShapeLayer GetBadgeLayer(UIBarButtonItem barButtonItem)
{
var handle = objc_getAssociatedObject(barButtonItem.Handle, BadgeKey.Handle);
if (handle != IntPtr.Zero)
{
var value = ObjCRuntime.Runtime.GetNSObject(handle);
if (value != null)
return value as CAShapeLayer;
else
return null;
}
return null;
}
static void DrawRoundedRect(CAShapeLayer layer, CGRect rect, float radius, UIColor color, bool filled)
{
layer.FillColor = filled ? color.CGColor : UIColor.White.CGColor;
layer.StrokeColor = color.CGColor;
layer.Path = UIBezierPath.FromRoundedRect(rect, radius).CGPath;
}
public static void AddBadge(this UIBarButtonItem barButtonItem, string text, UIColor backgroundColor, UIColor textColor, bool filled = true, float fontSize = 11.0f)
{
if (string.IsNullOrEmpty(text))
{
return;
}
CGPoint offset = CGPoint.Empty;
if (backgroundColor == null)
backgroundColor = UIColor.Red;
var font = UIFont.SystemFontOfSize(fontSize);
if (UIDevice.CurrentDevice.CheckSystemVersion(9, 0))
{
font = UIFont.MonospacedDigitSystemFontOfSize(fontSize, UIFontWeight.Regular);
}
var view = barButtonItem.ValueForKey(new NSString(#"view")) as UIView;
var bLayer = GetBadgeLayer(barButtonItem);
bLayer?.RemoveFromSuperLayer();
var badgeSize = text.StringSize(font);
var height = badgeSize.Height;
var width = badgeSize.Width + 5; /* padding */
//make sure we have at least a circle
if (width < height)
{
width = height;
}
//x position is offset from right-hand side
var x = view.Frame.Width - width + offset.X;
var badgeFrame = new CGRect(new CGPoint(x: x - 4, y: offset.Y + 5), size: new CGSize(width: width, height: height));
bLayer = new CAShapeLayer();
DrawRoundedRect(bLayer, badgeFrame, 7.0f, backgroundColor, filled);
view.Layer.AddSublayer(bLayer);
// Initialiaze Badge's label
var label = new CATextLayer();
label.String = text;
label.TextAlignmentMode = CATextLayerAlignmentMode.Center;
label.SetFont(CGFont.CreateWithFontName(font.Name));
label.FontSize = font.PointSize;
label.Frame = badgeFrame;
label.ForegroundColor = filled ? textColor.CGColor : UIColor.White.CGColor;
label.BackgroundColor = UIColor.Clear.CGColor;
label.ContentsScale = UIScreen.MainScreen.Scale;
bLayer.AddSublayer(label);
// Save Badge as UIBarButtonItem property
objc_setAssociatedObject(barButtonItem.Handle, BadgeKey.Handle, bLayer.Handle, AssociationPolicy.RETAIN_NONATOMIC);
}
public static void UpdateBadge(this UIBarButtonItem barButtonItem, string text, UIColor backgroundColor, UIColor textColor)
{
var bLayer = GetBadgeLayer(barButtonItem);
if (string.IsNullOrEmpty(text) || text == "0")
{
bLayer?.RemoveFromSuperLayer();
objc_setAssociatedObject(barButtonItem.Handle, BadgeKey.Handle, new CAShapeLayer().Handle, AssociationPolicy.ASSIGN);
return;
}
var textLayer = bLayer?.Sublayers?.First(p => p is CATextLayer) as CATextLayer;
if (textLayer != null)
{
textLayer.String = text;
}
else
{
barButtonItem.AddBadge(text, backgroundColor, textColor);
}
}
}
}
ToolbarItemBadgeService.cs
using TeamCollaXform.Views.Services;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: Dependency(typeof(ToolbarItemBadgeService))]
namespace TeamCollaXform.Views.Services
{
/// <summary>
///
/// </summary>
public interface IToolbarItemBadgeService
{
void SetBadge(Page page, ToolbarItem item, string value, Color backgroundColor, Color textColor);
}
/// <summary>
///
/// </summary>
public class ToolbarItemBadgeService : IToolbarItemBadgeService
{
public void SetBadge(Page page, ToolbarItem item, string value, Color backgroundColor, Color textColor)
{
Device.BeginInvokeOnMainThread(() =>
{
var renderer = Platform.GetRenderer(page);
if (renderer == null)
{
renderer = Platform.CreateRenderer(page);
Platform.SetRenderer(page, renderer);
}
var vc = renderer.ViewController;
var rightButtomItems = vc?.ParentViewController?.NavigationItem?.RightBarButtonItems;
var idx = rightButtomItems.Length - page.ToolbarItems.IndexOf(item) - 1; //Revert
if (rightButtomItems != null && rightButtomItems.Length > idx)
{
var barItem = rightButtomItems[idx];
if (barItem != null)
{
barItem.UpdateBadge(value, backgroundColor.ToUIColor(), textColor.ToUIColor());
}
}
});
}
}
}
Usage
void OnAttachClicked(object sender, EventArgs e)
{
//var answer = await DisplayAlert("Question?", "Would you like to play a game", "Yes", "No");
//Debug.WriteLine("Answer: " + answer);
ToolbarItem cmdItem = sender as ToolbarItem;
DependencyService.Get<IToolbarItemBadgeService>().SetBadge(this, cmdItem, $"2", Color.DarkOrange, Color.White);
}
Links: 1) for instruction and 2) for sample code
https://www.xamboy.com/2018/03/08/adding-badge-to-toolbaritem-in-xamarin-forms/
https://github.com/CrossGeeks/ToolbarItemBadgeSample
Here's my XAML:
<ListBox x:Name="MyListBox" FontSize="40"
SelectionChanged="MyListBox_SelectionChanged">
</ListBox>
In this code-behind (below), I am attempting to animate a delete action. When the item is selected I delete it. I visually animate it with a ScaleTransform. In WPF I would use a LayoutTransform, but since I only have RenderTransform in WP/SL, I am using RenderTransform - and as a result the surrounding layout is not responding to the change in size. The record is still correctly deleted, but the visual effect is diminished.
Is there a way to do this in WP? Is there a way to resize a ListBoxItem so that the surrounding content responds?
ObservableCollection<string> m_Data;
public MainPage()
{
InitializeComponent();
m_Data = new ObservableCollection<string>
{ "One", "Two", "Three", "Four" };
MyListBox.ItemsSource = m_Data;
}
private void MyListBox_SelectionChanged(object sender,
SelectionChangedEventArgs e)
{
// fetch ListBoxItem
if (e.AddedItems.Count == 0)
return;
var _Data = e.AddedItems[0] as string;
var _Item = MyListBox.ItemContainerGenerator
.ContainerFromItem(_Data) as ListBoxItem;
// setup to resize using scale transform
var _Scale = new ScaleTransform
{
CenterX = _Item.RenderSize.Width / 2,
CenterY = _Item.RenderSize.Height / 2,
ScaleX = .99,
ScaleY = .99
};
_Item.RenderTransform = _Scale;
// setup storyboard
var _Story = new Storyboard();
_Story.Completed += (s, e1) =>
{
// remove data from collection
m_Data.Remove(_Data);
};
// animate scale X
var _AnimationX = new DoubleAnimation
{
To = .01,
Duration = TimeSpan.FromSeconds(2),
};
_Story.Children.Add(_AnimationX);
Storyboard.SetTarget(_AnimationX, _Scale);
Storyboard.SetTargetProperty(_AnimationX,
new PropertyPath(ScaleTransform.ScaleXProperty));
// animate scale Y
var _AnimationY = new DoubleAnimation
{
To = .01,
Duration = TimeSpan.FromSeconds(2),
};
_Story.Children.Add(_AnimationY);
Storyboard.SetTarget(_AnimationY, _Scale);
Storyboard.SetTargetProperty(_AnimationY,
new PropertyPath(ScaleTransform.ScaleYProperty));
_Story.Begin();
}
You can also use LayoutTransform on Windows Phone so I would just use that. .