DropDownButton in pure XAML (almost works) - powershell

I'm trying to do a DropDownButton (or ComboButton) in Pure XAML because I want to use the GUI in PowerShell.
I'm aware of wpftoolkit's DropDownButton but it needs custom C#/c++ code to make it work.(and if I could bring it in, the wpftoolkit would be bigger than my project!)
Below I just stacked a Button control on top of a comboBox control. (Ugly, I know but my options are limited from my point of view)
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="580"
MinHeight="580"
MinWidth="700"
Width="700"
Background="lightgray">
<Grid>
<ComboBox
x:Name="CboxWakeUp"
Width="100"
Height="80"
HorizontalAlignment="Right"
Margin="10,10,10,0"
VerticalAlignment="Top"
Background="green"
IsEditable="True"
IsReadOnly="True"
TextBlock.FontSize="16"
>
<ComboBoxItem Content="WakeUp and RDP" IsSelected="True"/>
<ComboBoxItem Content="WakeUp from list"/>
<ComboBoxItem Content="WakeUp and Run"/>
</ComboBox>
<!-- Button is ON TOP of ComboBox -->
<Button
Name="btnWakeUp"
Width="85"
Height="80"
HorizontalAlignment="Right"
Margin="10,10,25,0"
VerticalAlignment="Top"
Background="green"
TextBlock.FontSize="16"
>
<!-- This would makes the SelectedValue text wrap but the binding binding syntax used is taken literally -->
<TextBlock Text="{Binding SelectedValue, ElementName=CboxWakeUp}" TextWrapping="Wrap" TextAlignment="Center"/>
</Button>
</Grid>
</Window>
I'm close but I need help.
I need to wrap the text of the button and I have figured it out by embedding a TextBlock control inside the Button control (Thank you TheMadTechnician! ) but the binding syntax I used in the button is taken literally.
NOTE: I had the binding to the button working directly but when a selection was made in the ComboBox, Kaxaml gave me "Must disconnect specified child from current parent Visual before attaching to new parent Visual" error. I'm hoping the TextBlock control will side-step this issue.
PS: I was going to try to make the button change colour based on the selection made in the ComboBox:
WakeUp and RDP ==> Green
WakeUp from list ==> Blue
WakeUp and Run ==> Red
This will have to be done in PS code and that's ok

Related

.NET MAUI TableView collapses when Entry control receives focus

I have a TableView in which I render form controls for data editing.
However, as soon as the Entry control receives focus, the ViewCell seemingly collapses, leaving only the section title and separator borders visible:
<TableView Intent="Data">
<TableRoot>
<TableSection Title="Details">
<ViewCell>
<Grid ColumnDefinitions="0.5*,0.5*">
<Label Text="Manufacturer" />
<Entry Text="{Binding Manufacturer}" Grid.Column="1" />
</Grid>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
Initial state:
After tapping the Entry element:
I've tried setting a specific height for the Grid and the Entry control, but I get the same result regardless.
Am I missing something obvious here? 🤔
It's a bug in .NET MAUI: https://github.com/dotnet/maui/issues/10322
I ran into this a while ago and reported it. For now, I have created my own table using a Grid.
You can change The TableView HeightRequest property to a large number such as 700.
This is a temporary workaround until the bug is fixed.
<TableView HeightRequest="700">
<TableRoot>
<TableSection>
<!-- Your code goes here -->
</TableSection>
</TableRoot>
</TableView>
But, in most scenarios, you don't know what the Height is so you could set it dynamically in your code behind.
Page constructor:
public MainPage()
{
InitializeComponent();
// if you want your table height to fit half of the page
Table.HeightRequest = this.Height / 2;
// Rest of logic...
}
Xaml:
<TableView x:Name="Table">
<TableRoot>
<TableSection>
<ViewCell>
<Label Text="Example"/>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>

How do I wordwrap a dynamically edited TextBlock in Powershell with xaml?

I have managed to (almost) successfully create an about box using powershell with xaml. The (hopefully!) last thing I am stuck on is the TextBlock. My goal is to make a universal about.xml that can then be edited by each script that uses it (this prevents having dozens of about.xml). I have the "description" in a textBlock, but it loses the wordwrap feature when it is edited. Is there a way to preserve wordWrapping and font style when a text block is edited via powershell script? Note: I use Visual Studio Code with Notepad++. I don't have access to Visual Studio, and I am not authorized to use addons or other editors. I also don't want to use a RichTextBox, because I don't want the end user making any edits. I have been researching this all day, and none of the answers I have found online work. My codes are below. For my attempted edit, see the lines with "$editedBlock..."
Powershell script:
#First, add the assembly into the current session
Add-Type -AssemblyName PresentationFramework
#read xml file for about box
$aboutXaml = "F:\aboutWindow.xml"
$global:aboutWindow = New-Object xml
$global:aboutWindow.Load($aboutXaml)
#create Xaml reader
$aboutReader = (New-Object System.Xml.XmlNodeReader $aboutWindow)
$aboutBox = [Windows.Markup.XamlReader]::Load($aboutReader)
$editedBlock = $aboutBox.FindName("editedTextBlock")
$editedBlock.Text = "This text has been edited by the Powershell script. As you can
see, the text wrap feature has been broken by this. It wraps, but also includes the
carriage return.
This makes it useless for the purpose of creating a dynamic about
xml that can be edited by the multiple scripts that will use it. It also strips
my font size/styles"
# $editedBlock.TextWrapping = "WrapWithOverflow" #These both appear to be useless....
$editedBlock.TextWrapping = "Wrap"
#aboutBox properties
$aboutBox.Width="400"
$aboutBox.Height="400"
$aboutBox.Title="About"
$aboutBox.Topmost="true"
$aboutBox.ResizeMode="NoResize"
$aboutBox.Icon = "my\icon\path"
$aboutBox.WindowStartupLocation="CenterScreen"
$aboutBox.ShowDialog() | Out-Null
My xml script:
<?xml version="1.0" encoding="UTF-8"?>
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp9">
<Grid x:Name="Grid"
Margin="10,10,10,10" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Begin About Properties -->
<TextBlock Width="Auto"
Margin="5,5,5,5"
Grid.Row="0"
TextWrapping="Wrap"
HorizontalAlignment="Left">
<Run Foreground="Transparent">IND.. </Run>
<Run FontFamily="Calibri"
FontSize="14"> Using TextBlock allows the use of Textwrapping, but
if they are dynamically edited, the text wrapping goes away.
The text I write is wrapped until that happens. Even
if I hit enter in the
middle
of a sentence, it wraps correctly</Run>
</TextBlock>
<TextBlock Width="Auto"
Margin="5,5,5,5"
Grid.Row="1"
HorizontalAlignment="Left"
x:Name="editedTextBlock"
TextWrapping="Wrap">
<Run Foreground="Transparent">IND.. </Run>
<Run FontFamily="Calibri"
FontSize="20"> place holder</Run>
</TextBlock>
</Grid>
</Window>
The included image is the window that comes up.

How to organise a Show layout in React Admin using a Material UI Grid

I've created a number of Show views in a new React-Admin project. Rather than have the fields just form a single column I would like to use Material UI's Grid component to arrange them into a more efficient and helpful layout. Unfortunately this stops React Admin's ...ShowLayout components from rendering the Field components inside them properly.
I was hoping to be able to do something like this:
<Show {...props}>
<SimpleShowLayout>
<Grid container>
<Grid item>
<TextField source="firstName" />
</Grid>
<Grid item>
<TextField source="lastName" />
</Grid>
</Grid>
</SimpleShowLayout>
</Show>
I've also had a go at creating wrapper components to try to ensure the right props get passed along to the Field components, to no avail. How can I better arrange the fields in a layout? Do I have to fall back to "manually" styling the contents of a show layout using custom styles? If so that seems a shame given that RA uses MUI so heavily for rendering and it already provides a framework for doing this.
In case somebody is still stumbling upon this issue - just passing the props forward is not enough based on how the SimpleShowLayout works behind the scenes.
I am working on a react-admin npm package where I have implemented a basic recursive GridShowLayout. It allows you to nest as many <Grid> components as needed like #Pedro Viera have shown and the react-admin fields will still recieve the needed props accordinly.
There is also a BoxedShowLayout, you can check it out here: ra-compact-ui/GridShowLayout
Example:
<Show {...props}>
<GridShowLayout>
<Grid container>
<Grid >
<TextField source="firstName" />
</Grid >
<Grid >
<TextField source="lastName" />
</Grid >
</Grid >
</GridShowLayout>
</Show>
I tried to style my app with grids and it was a nightmare, I was advised to use flexboxes instead, the advantage is that it is extremely responsive. You could do it like this:
import { unstable_Box as Box } from '#material-ui/core/Box';
<Show {...props}>
<SimpleShowLayout>
<Box display="flex">
<Box>
<TextField source="firstName" />
</Box>
<Box>
<TextField source="lastName" />
</Box>
</Box>
</SimpleShowLayout>
</Show>
And using the desired configurations from the material-ui documentation, like
<Box display="flex" flexWrap="wrap" justifyContent="center" alignItems="center">

How do i set the default index to 0 when i bind to combobox?

I am using MVVM in my application and binding combobox to my collection. However when i run it the combobox doesn't have any selected index and it shows a ugly emtpy box. How do i get past this issue?
This is my code :-
<ComboBox x:Name="cmbPasswordQuestion" ItemsSource="{Binding PasswordQuestionList}" DisplayMemberPath="SiteTermsXItemsName" SelectedValuePath="SiteTermsXItemId" SelectedValue="{Binding SignUpUser.PasswordQuestionId}" Margin="97,210,247,0" VerticalAlignment="Top" Height="24">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding PasswordQuestionCommand}" CommandParameter="{Binding SelectedItem, ElementName=cmbPasswordQuestion}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
I am not able to set the SelectedIndex = 0 directly in xaml as i am binding the collection run time.
Thanks in advance :)
All you need is to set SignUpUser.PasswordQuestionId to the id of the first item in the combobox right after you initialized the PasswordQuestionList property. And the binding will do the rest.

Binding command to button in silverlight 4 using mvvm

I have a user control called HomePage.xaml. I'm creating a model instance (using MVVM pattern) in the code behind file in the constructor of page as
MainViewModel model = new MainViewModel();
I have a button in HomePage.xaml which I want to bind to the command inside MainViewModel called GetData() and want to populate the data in datagrid. MainViewModel has an ObservableCollection which I would use to bind the data in datagrid.
Populating the data in datagrid without binding command works fine.
I'm binding the button as:
<StackPanel x:Name="stkPanelInput" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="buttonGetData" Width="70" Content="GetData" Command="{Binding GetData}" Click="buttonGetData_Click"/>
</StackPanel>
How shall I bind the command using MVVM?
Like Archie said, set the DataContext of your page to the instance of your MainViewModel.
DataContext = model;
Then you have your XAML look like this:
<StackPanel x:Name="stkPanelInput" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="buttonGetData" Width="70" Content="GetData" Command="{Binding GetDataCommand}" Click="buttonGetData_Click"/>
</StackPanel>