Aligning XAML ToolBarPanels - xaml

I have to create a control which aligns some of its button on the left and some others on the right in one row.
I've immediatly thinked to WPF Toolbar so I've typed:
...
<ToolBarTray DockPanel.Dock="Top">
<ToolBar ToolBarTray.Locked="True" Width="{Binding ElementName=Tray, Path=ActualWidth}">
<DockPanel>
<ToolBarPanel DockPanel.Dock="Left">
<Button ...>
</ToolBarPanel>
<ToolBarPanel DockPanel.Dock="Right">
<Button ...>
</ToolBarPanel>
</DockPanel>
</ToolBar>
</ToolBarTray>
...
but this didn't work: the buttons with dockpanel.dock = right are just attached on the right of the first ToolBarPanel and, if I've understood something about xaml, this is absolutely correct, that's why I tried forcing the width of the toolbar.
If I use a Grid with a spacing column, the right ToolBarPanel moves correctly to the right, but my control needs to be resized and I guess there's no easy way to assign the correct width to the column.
Is there some easier way to achive my task?

Related

Why CommandBarFlyout showing only eleven buttons maximum?

I need to create a CommandBarFlyout with many buttons.
My XAML code:
<StackPanel>
<Button Height="40" Width="40">
<Image Source="/Assets/StoreLogo.png"/>
<Button.Flyout>
<CommandBarFlyout>
<AppBarToggleButton>
<AppBarToggleButton.Icon>
<BitmapIcon UriSource="/Assets/StoreLogo.png"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
</CommandBarFlyout>
</Button.Flyout>
</Button>
</StackPanel>
If I copy-paste twelve buttons in CommandBarFlyout - only first eleven are showing.
If I add more buttons - still first eleven shown.
From this document about Commandbarflyout, it mentions:
Unlike CommandBar, primary commands do not automatically overflow to
the secondary commands and might be truncated.
So the reason why only 11 buttons are displayed should be that the actual contents have overflowed the scope of the primary command and were truncated.
If you still want to continue to use CommandBarFlyout, you can also add commands to the SecondaryCommands collection. Or as the document said, to use CommandBar or Flyout.

Is it possible to make the background-colour of a Canvas field dependent on its value?

I want one datetime field's background colour to depend on its value. Like if a certain date is passed, the background changes to red.
Is there a way to make this in XAML?
I know there is no possibility of an "if" condition/instruction, but maybe you guys found some way to implement a similar function.
<Canvas Canvas.Left="893" Canvas.Top="208" Height="25" Width="99" Background="red" Panel.ZIndex="-1"/>
<assembly:FieldControl Canvas.Left="890" Canvas.Top="206" FieldControlType="DateControl" FormField="{x:Null}" Height="25" LabelColumnWidth="0" Refnr="123456789" ShowCaption="False" StateImageAlignment="Hidden" Width="106" FontSize="10" Foreground="DimGray"/>
this is my code so far. The Canvas-Part makes the Background go red.
I also tried to put the background property in the "FieldControl" but there it's useless.
EDIT:
After getting the information, that Data Binding could help me with this problem, i tested it like this:
<TextBox Canvas.Left="890" Canvas.Top="226" Name="Date" Width="99" Height="25" VerticalAlignment="Top" Text="{Binding ElementName=Date, Path = SelectedItem.Content, Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}" Background="{Binding ElementName=Date, Path=SelectedItem.Content}">
But this is not the direction, i need. Do you have maybe any suggestion, how I can use Data binding to solve my problem?
Yes, it is possible. The concept you need to learn is XAML Data Binding.
You can implement the IValueConverter for this.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters
You can check the value on binding and return the background color.
how to give different text color for each item of listview in xamarin forms

UWP - Pivot IsTabStop not working as expected

I have a pivot that I am trying to keep from gaining focus when the user hits the tab key. I immediately tried to set IsTabStop to false. However this wasn't keeping a user from tabbing into the pivot. So I tried testing IsTabStop on two buttons and the behavior was exactly what I expected from the pivot.
Here is my xaml:
<Pivot IsTabStop="False">
<PivotItem Header="Test">
<StackPanel Spacing="10">
<Button Content="Button 1" IsTabStop="True"/>
<Button Content="Button 2" IsTabStop="False"/>
</StackPanel>
</PivotItem>
</Pivot>
Am I missing something here or is there a way around this?
Setting tab index to -1 only makes it first, try something like 1001.. In here they explain the issue you may be having but for RichTextBlock, there are various attributes available for it to set.. https://learn.microsoft.com/en-us/windows/uwp/design/accessibility/keyboard-accessibility
So what i ended up doing is overriding the default style on the pivot. I changed the "HeaderClipper" in the style to have IsTabStop="False", this fixed my problem.
The documentation for the default pivot style can be found at https://msdn.microsoft.com/en-us/library/windows/apps/mt299144.aspx

Display image on right side of header text in XamMenu in silverlight page

I have created a XamMenu in my silverlight page. It consists of 4 options in it. The header for the first item is 'order'. I am using xamMenuItem.icon to add an image on the right side of the header text. But it is always coming on the left side of the header text. How can I do that? Please help.
My xaml code id like this:
<ig:XamMenu x:Name="xamOrderMenu" Height="22" Width="120" ExpandOnHover="True" Canvas.Left="361" Canvas.Top="10">
<ig:XamMenuItem Header="Order" SubmenuPreferredLocation="Bottom" Background="LightGray" FontWeight="Bold" Cursor="Hand">
<ig:XamMenuItem.Icon>
<Image Source="/Asset.View;component/Images/downarrow.PNG"/>
</ig:XamMenuItem.Icon>
<ig:XamMenuItem Header="Order1" StaysOpenOnClick="True" Background="LightGray" Click="ExportToExcel_Click" Cursor="Hand"/>
<ig:XamMenuItem Header="Order2" Background="LightGray" Click="DownloadFundCountTemplate_Click" Cursor="Hand"/>
<ig:XamMenuItem Header="Order3" Background="LightGray" Click="UploadTemplate_Click" Cursor="Hand"/>
<ig:XamMenuItem Header="Order4" Background="LightGray" Click="SearchAndExportToExcel_Click" Cursor="Hand"/>
</ig:XamMenuItem>
You're going to need to retemplate the XamMenuItem to place the icon in a different spot. In the default template, the XamMenuItem is seperated into 3 columns. The icon is placed into the left-most column, header text in the center and the child indicator in the right-most column.
If you have the Infragistics product installed you have access to the default template. You can find it here:
C:\Program Files (x86)\Infragistics\NetAdvantage (release version #)\Silverlight\DefaultStyles\XamMenu
Open the generic.xaml file and do a search for XamMenuItem and the first thing that comes up should be the style for it. The template can be found there. Add this style and its dependencies to your project and then make the necessary adjustments to place the icon on the right side of the header text. You can then assign this style to your XamMenuItems.

XAML for floating window in AvalonDock

Can someone provide me with an AvalonDock XAML code piece that when run opens the app with a floating window instead of being always docked inside the dock pane? I've seen programmatic ways to do it, but I thought there must be a way to specify it in XAML. Thanks...
I know this is a bit late, but hopefully it will help someone with the same issue in the future...
To create a floating document, add a LayoutDocumentFloatingWindow as a child of LayoutDocumentFloatingWindow, and then add your LayoutDocument as a child of the LayoutDocumentFloatingWindow, as below:
<xcad:DockingManager>
<xcad:LayoutRoot>
<xcad:LayoutRoot.FloatingWindows>
<xcad:LayoutDocumentFloatingWindow>
<xcad:LayoutDocument Title="My Document">
<!--Add document content here-->
</xcad:LayoutDocument>
</xcad:LayoutDocumentFloatingWindow>
</xcad:LayoutRoot.FloatingWindows>
</xcad:LayoutRoot>
</xcad:DockingManager>
Similarly you can add anchorables like so:
<xcad:DockingManager>
<xcad:LayoutRoot>
<xcad:LayoutRoot.FloatingWindows>
<xcad:LayoutAnchorableFloatingWindow>
<xcad:LayoutAnchorablePaneGroup>
<xcad:LayoutAnchorablePane>
<xcad:LayoutAnchorable Title="My anchorable">
<!--Add anchorable content here-->
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
</xcad:LayoutAnchorablePaneGroup>
</xcad:LayoutAnchorableFloatingWindow>
</xcad:LayoutRoot.FloatingWindows>
</xcad:LayoutRoot>
Note that unlike LayoutDocuments, for anchorables you need to add a group pane rather than just a single LayoutAnchorable, because floating anchorables are designed to be able to be grouped in a single window but LayoutDocuments are not.
As a more general guide, an example of how to set up varioius layout elements in a DockingManager can be found here: https://xceed.com/wp-content/documentation/xceed-toolkit-plus-for-wpf/AvalonDock.html