Open User Control in a grid in main Window - WPF - wpf

I'm writing now an app with WPF and trying to remember things I did long time ago.
I'm trying to have a window with 4 buttons that I will navigate with them through the app.
My code:
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="55*"/>
<ColumnDefinition Width="453*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StatusBar Margin="0" VerticalAlignment="Top" Height="23" Grid.ColumnSpan="4" Grid.Row="2" Background="#FF1A202C"/>
<Menu Margin="0" Height="23" Grid.ColumnSpan="4" Background="#FF1A202C" />
<StackPanel Grid.Row="1" Width="224.2" HorizontalAlignment="Left" Background="#FF1F7872" >
<Button Content="Dashboard" Style="{StaticResource BorderlessButton}" Foreground="#FFF1E7E7" Template="{DynamicResource GlassButton}" Margin="25,20,23,20" Click="Button_Click_1" />
<Button Content="Components" Style="{StaticResource BorderlessButton}" Foreground="#FFF1E7E7" Template="{DynamicResource GlassButton}" Margin="25,20,23,20"/>
<Button Content="TimeLine" Style="{StaticResource BorderlessButton}" Foreground="#FFF1E7E7" Template="{DynamicResource GlassButton}" Margin="25,20,23,20"/>
<Button Content="Drilldown" Style="{StaticResource BorderlessButton}" Foreground="#FFF1E7E7" Template="{DynamicResource GlassButton}" Margin="25,20,23,20"/>
</StackPanel>
<Grid Grid.Column="2" Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="2" Background="#FF72B095">
</Grid>
</Grid>
I've 4 user controls that I want they will appear in the Grid (maybe I'll need to replace the control) when I'm clicking the buttons.
A friend suggest that I'll use storyboard on Blend, but I remembered that a long time ago I did it differently and I used only XAML and C#.
I tried to use the storyboard tool but I didn’t understand how to use it, in general I think the storyboard tool is overkill for my use.

Give a name to the grid:
<Grid Name="MainGrid" >
</Grid>
and then, in code behine, handle click events:
void Button_Click_1(object sender, MouseEventArgs e)
{
MainGrid.Children.Add( // Your control //);
}

Related

How to get Narrator to read the text in a WPF Popup?

I've got a WPF application which contains a button. When you press the button, a Popup opens. The Popup contains information about the meeting in question.
With Narrator turned on, the contents of the Popup are not being read. How do I get Narrator to read the Popup's contents?
Here's a sample of the Popup's contents:
<Popup x:Class="ClassApp.UserInterface.Views.Windows.Settings.MeetingDetailsPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:languages="clr-namespace:MyApp.UserInterface.CommonUI.Languages"
xmlns:converters="clr-namespace:MyApp.Converters"
xmlns:global="clr-namespace:"
Height="375"
mc:Ignorable="d"
MaxHeight="375"
MaxWidth="500"
StaysOpen="True"
Placement="MousePoint"
Width="500">
<Border BorderBrush="{StaticResource GrayBrush}"
Background="{StaticResource TabSelectedBackgroundBrush}"
BorderThickness="1">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
<RowDefinition Height="Auto"
MinHeight="100"/>
<RowDefinition Height="Auto"
MinHeight="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
AutomationProperties.AutomationId="ClassName"
AutomationProperties.Name="{Binding ClassName}"
FontSize="18"
FontWeight="Bold"
x:Name="ClassName"
Style="{StaticResource ClassInformationTextBlockStyle}"
Text="{Binding ClassName}"
TextWrapping="Wrap"
VerticalAlignment="Top"/>
<Button Grid.Column="1"
AutomationProperties.Name="{x:Static languages:Resources.Accessibility_CloseWindow}"
AutomationProperties.AutomationId="CloseWindow"
Command="{Binding CloseMeetingInfoCommand}"
Content="X"
FontSize="16"
HorizontalAlignment="Right"
x:Name="CloseButton"
Style="{StaticResource ClassInformationCloseButtonStyle}"
VerticalAlignment="Top"/>
</Grid>
<TextBlock Grid.Column="0"
Grid.Row="1"
AutomationProperties.Name="{x:Static languages:Resources.Label_MeetingID}"
FontSize="14"
Foreground="{StaticResource GrayBrush}"
x:Name="MeetingIdLabel"
Style="{StaticResource ClassInformationTextBlockStyle}"
Text="{x:Static languages:Resources.Label_MeetingID}"
VerticalAlignment="Top"/>
<TextBlock Grid.Column="2"
Grid.Row="1"
AutomationProperties.AutomationId="MeetingId"
AutomationProperties.Name="{Binding MeetingID}"
AutomationProperties.LabeledBy="{Binding ElementName=MeetingIdLabel}"
FontSize="14"
Style="{StaticResource ClassInformationTextBlockStyle}"
Text="{Binding MeetingID}"
VerticalAlignment="Top"/>
. . .
</Grid>
</Grid>
</Border>
</Popup>
EDIT: The rest of the Popup consists of more TextBlocks and a couple of buttons for copying a link or all of the data into the clipboard. I didn't include it because I don't believe it matters.
You need to set Popup.IsKeyboardFocused to true. The default value is false.
This will move the tab focus to the popup. Just remember that you'll need to move the focus back (preferably to the trigger that opens the popup) when the user closes it.

fluid layout in wpf is rendering enormous controls

EDIT
Having removed the <ViewBox Stretch="UniformToFill"> from the xaml, it renders better - the size of the controls are more appropriate, however, as the Frame is empty when I'm loading the window, the whole app appears as a band across the center of my screen.
When I do load content into the frame, the rest of the window fits width to the frame, rather than to the screen resulting in empty space on the left and right of the Frame's content.
ORIGINAL QUESTION
I've never done a fluid layout before so what I've done is based entirely on what I've gleaned from answers to other questions on SO and around the interwebz.
So the following XAML, I figured, should be "responsive" which is to say that it would render much the same on every screen resolution without using fixed widths.
Unfortunately, the controls are rendering at enormous scale. What should be a 30x30 button looks to be rendering around 10x that size (see the screenshots below - the second one is the app maximized to fullscreen).
How can I change my xaml to make these controls render to the row heights and to the width of the display?
<Grid>
<Viewbox Stretch="UniformToFill">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Titlebar -->
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="#2d2d30">
<StackPanel Name="spTitlebar1" FlowDirection="LeftToRight" Orientation="Horizontal" MouseDown="spTitlebar_MouseDown">
<Label Name="lblTitle" HorizontalAlignment="Left" BorderThickness="0" Foreground="White">IHS Towers SCADA</Label>
</StackPanel>
<StackPanel Name="spTitleBar2" FlowDirection="RightToLeft" Orientation="Horizontal" MouseDown="spTitlebar_MouseDown">
<Button Name="btnClose" Content="X" Click="btnClose_Click" Style="{StaticResource TitleButton}" />
<Button Name="btnMinimize" Content="_" Click="btnMinimize_Click" Style="{StaticResource TitleButton}" />
<Border BorderThickness="1,0,0,0" BorderBrush="#686868">
<Button Name="btnSettings" Click="btnSettings_Click" Style="{StaticResource TitleButton}" ToolTip="Settings">
<Image Source="Images/settings-icon.png" Height="20" Width="20"/>
</Button>
</Border>
<Button Name="btnReports" Click="btnReports_Click" Style="{StaticResource TitleButton}" ToolTip="View reports">
<Image Source="Images/reports-icon.png" Height="20" Width="20"/>
</Button>
</StackPanel>
</StackPanel>
<!-- Towers Bar across the top Height="50" -->
<StackPanel Grid.Row="1" Grid.Column="0" Name="spTowers" Background="#2d2d30" VerticalAlignment="Top" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,0">
<Border BorderThickness="5,0,0,0" BorderBrush="#686868" VerticalAlignment="Top"></Border>
</StackPanel>
<!-- Alert Window in the center -->
<Frame Name="frmBody" Grid.Row="2" Grid.Column="0" Margin="0" Background="#1e1e1e" NavigationUIVisibility="Hidden" />
<!-- Actions Bar across the bottom Height="60" -->
<StackPanel Grid.Row="3" Grid.Column="0" Name="spActions" Height="60" Background="#2d2d30" VerticalAlignment="Top" FlowDirection="RightToLeft" Orientation="Horizontal">
<Button Name="btnSMS" Click="btnSMS_Click" Height="30" Width="66" Margin="10,10,10,10" Style="{StaticResource RoundedButtonGreen}">Send SMS</Button>
</StackPanel>
</Grid>
</Viewbox>
</Grid>

window resize when textbox resize

Here is the code for Textbox available in my window(form1.xaml),My requirement is when i am resizing my window i want to resize the textbox width also, How can i able to achieve this....
<TextBox Width="500" HorizontalAlignment="Left" Margin="5,0,0,5" TextWrapping="Wrap" AcceptsReturn="True" Text="{Binding Result,UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}" IsEnabled="{Binding OpenMode,Converter={StaticResource EnableModeConverter}}" Height="70" />
In WPF you typically place TextBox control within layout Grid control and set the ColumnDefinition Width property of that Grid cell to some relative value "*", so it will resize with the Window. Do NOT use a fixed Width="500" as per your sample: also, remove that "HorizontalAlignment="Left" (the default value is HorizontalAlignment="Stretch", so you can just omit it to simplify your XAML). See the following sample code snippet:
<Grid Name="Grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<TextBox Name="TextBox1" Grid.Row="0" Grid.Column="0" Height="70" Margin="5,0,0,5" TextWrapping="Wrap" AcceptsReturn="True" (...Rest of Your code) />
</Grid>
Note: The same technique could be applied to a vertical "Height" property in case you need to make it also resizable.
Hope this will help. Best regards,
Set HorizontalAlignment to Stretch, and don't set the Width
<Grid>
<TextBox HorizontalAlignment="Stretch"
Margin="5,0,0,5"
TextWrapping="Wrap"
AcceptsReturn="True"
Height="70" />
</Grid>
Layout in WPF is heavily depend on the parent container. For example, create a form with labels and input fields, consider using a Grid panel. Controls in WPF by default resize according to the layout behavior of their parent. Here is an example of a window with two labeled text boxes and two buttons that resize along with the window.
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Contact Name" Grid.Row="0" Grid.Column="0" />
<TextBox Grid.Row="0" Grid.Column="1" />
<Label Content="Contact Location" Grid.Row="1" Grid.Column="0" />
<TextBox Grid.Row="1" Grid.Column="1" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1">
<Button Content="OK" Width="75" Height="24" Margin="3" />
<Button Content="Cancel" Width="75" Height="24" Margin="3" />
</StackPanel>
</Grid>
</Window>

Odd WPF Grid Behavior Affected by TextBox Text

I can't figure out why the contents of my TextBox is affecting my grid column widths. I have setup a grid with 3 columns with widths defined as 50, *, 50, as shown below
Now, when in use, the center column will grow/shrink as the text in the TextBox changes, see the 2 examples below. The actual TextBox is not changing size, so I can't understand why in the world the grid is changing. The Grid is inside of a Border inside a UserControl. The UserControl is used as a DataTemplate in a ListBox.
Edit: I've discovered that this issue is related to the UserControl being in a ListBox, see example image below (UserControl in ListBox (circled in red) vs. UserControl Placed on Form (circed in blue). The grid behaves as expected when the UserControl is placed directly on the form. Code for the form is given below.
UserControl XAML:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Name:" Margin="2" />
<TextBox Grid.Column="1" Margin="2" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Grid.ColumnSpan="2" />
<TextBlock Text="Shift:" Grid.Row="1" Margin="2" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding TimeShift, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, FallbackValue=0}" HorizontalContentAlignment="Right" />
<TextBlock Text="s" Grid.Row="1" Grid.Column="2" Margin="2" />
</Grid>
Window/Form XAML:
<Window x:Class="CrashSimOffice.FileImport"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CrashSimOffice"
Title="File Import" Height="350" Width="450" Background="White" Icon="/CrashSimOffice;component/Images/16/page-white-save.png">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Content="Add" Margin="2" Command="{Binding AddFileCommand}" />
<Button Content="Remove" Grid.Column="1" Margin="2" Command="{Binding RemoveFileCommand}" />
<ListBox HorizontalContentAlignment="Stretch" Grid.ColumnSpan="4" Margin="2" Grid.Row="1" ItemsSource="{Binding Files}" SelectedItem="{Binding CurrentFile}" ScrollViewer.CanContentScroll="False" Background="WhiteSmoke">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:FileViewModel}">
<local:FileView DataContext="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Done" Grid.Column="3" Margin="2" Grid.Row="2" Click="Button_Click" />
<local:FileView Grid.Row="3" Grid.ColumnSpan="4" />
</Grid>
OK, I figured it out, Bruno V you got me thinking it must have something to do with the ListBox. I needed to add this to my ListBox:
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Not sure why that works, but it does.

How to organize elements inside a Button

i'm new to wpf .
i got a wpf button ,
in it i need to place 2 elements a textblock and a viewbox encapsulating a canvas
the problem is i can't seem to see the canvas at all , unless i give it static values for its size
<Button Margin="10,30,10,10" Padding="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Viewbox Margin="0,0,0,5">
<Canvas Background="red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1" >
<Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Black" StrokeThickness="4" ></Ellipse>
</Canvas>
</Viewbox>
</Grid>
</Button>
iv'e also attempted this using a stack panel with an horizontal orintation
in any case the canvas does not show
any thoughts of what i'm doing wrong ?
thanks.
Attached Grid properties only work when at the Grid-child-level, i.e. the properties set on the canvas do not take effect they should be set on the container, the ViewBox which is a direct child of the Grid.
Viewboxes only work if the content has a concrete size, you probably need neither the ViewBox nor the Canvas. If you want the Ellipse to be a circle set Stretch="Uniform"
The contents of Buttons do not stretch by default you should set HorizontalContentAligment and its vertical counterpart to Stretch.
e.g.
<Button Margin="10,30,10,10" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Ellipse Stretch="Uniform" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="Black" StrokeThickness="4"></Ellipse>
</Grid>
</Button>

Resources