Develop Reference

How to stop TextBox from expanding indefinitely in wfp

I have the following control:
Which is defined by the following code:
<UserControl x:Class="VariantMeshEditor.Views.EditorViews.Util.BrowsableItemView"
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:common="clr-namespace:CommonDialogs.Common;assembly=CommonDialogs"
mc:Ignorable="d"
x:Name="self">
<UserControl.Resources>
<common:BoolToVisibilityConverter x:Key="BoolToHiddenConverter" TrueValue="Visible" FalseValue="Collapsed" />
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="50" Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Content="{Binding LabelName, ElementName=self}" Width="{Binding LabelLength, ElementName=self}"/>
<Label Grid.Column="1">:</Label>
<CheckBox Grid.Column="2" x:Name="CheckBox" Visibility="Collapsed" VerticalAlignment="Center"></CheckBox>
<Border x:Name="b" Grid.Column="3"/>
<TextBox Grid.Column="3" IsReadOnly="{Binding PathTextReadOnly, ElementName=self}" TextWrapping="NoWrap" VerticalAlignment="Center" Text="{Binding PathText, ElementName=self}" Width="{Binding ActualWidth, ElementName=b}"/>
<Button Grid.Column="4" Visibility="{Binding DisplayRemoveButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Remove, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Remove</Button>
<Button Grid.Column="5" Visibility="{Binding DisplayBrowseButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Browse, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Browse</Button>
<Button Grid.Column="6" Visibility="{Binding DisplayPreviewButton, ElementName=self, Converter={StaticResource BoolToHiddenConverter}}" Command="{Binding Preview, ElementName=self}" CommandParameter="{Binding}" DockPanel.Dock="Right" Width="50" >Preview</Button>
</Grid>
</UserControl>
My problem is that when I expand the control where this control is used and then make is smaller again, the TextBox does not get smaller. Any idea on how to resolve this? I want to label to always be fixed to the left side and the buttons to the right with the Texbox occupying whatever is left.
Normal:
Expanded:
Made smaller again:

The XAML you've posted doesn't have anything obviously wrong, and seems to work fine. I created a minimal example that doesn't have any bindings or code that we don't have access to, this is below. If you paste this into a clean WPF App you'll see it expands and shrinks without problem.
This means the problem is likely to be in code that you haven't shared somewhere (or I'm just missing it). If you can modify this example to show the issue someone may be able to help you.
<Window x:Class="WpfApp1.MainWindow"
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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<UserControl
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"
mc:Ignorable="d"
x:Name="self">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="50" Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Content="Label" Width="40"/>
<Label Grid.Column="1">:</Label>
<CheckBox Grid.Column="2" x:Name="CheckBox" Visibility="Collapsed" VerticalAlignment="Center"></CheckBox>
<Border x:Name="b" Grid.Column="3"/>
<TextBox Grid.Column="3" IsReadOnly="False" TextWrapping="NoWrap" VerticalAlignment="Center" Text="Type here"/>
<Button Grid.Column="4" DockPanel.Dock="Right" Width="50" >Remove</Button>
<Button Grid.Column="5" DockPanel.Dock="Right" Width="50" >Browse</Button>
<Button Grid.Column="6" DockPanel.Dock="Right" Width="50" >Preview</Button>
</Grid>
</UserControl>
</DockPanel>
</Window>

Is there a way to plot OXYplot graph in custom area in WPF window?

I want to put several graphs in one WPF window using OXYplot library, so there will be some WPF components (like buttons) and some rectangles with graphs. It there a way to do it? In all examples the OXYplot graph occupies the whole WPF window.
I tried to put it inside a rectangle like this, but got an error "The type 'Rectangle' does not support direct content"
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="932,547,0,0" Stroke="Black" VerticalAlignment="Top" Width="100">
<oxy:PlotView Model="{Binding Model}"/>
</Rectangle>

Put it in a Panel or decorate it with a a Border:
<Border Background="Yellow" BorderBrush="Black" BorderThickness="1" Padding="10">
<oxy:PlotView Model="{Binding Model}"/>
</Border>
A PlotView is just a custom Control that you can use in your layout as you would use any other control in WPF.

To keep it simple, you could use Grid as well, to arrange multiple PlotView and buttons in desired layout.
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel1}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel2}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel3}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<oxy:PlotView Height="500" Width="500" Model="{Binding GraphModel4}"/>
<Button Grid.Column="1" Content="Click"/>
</Grid>
</Grid>

C# - How to create a WPF interface with independent splitters on the same column and/or row?

I'm completely novice with the Visual Studio 2019 WPF interfaces, but I need to create a demo project for my job, in order to determine if we will migrate to a such technology in the future.
To determine that, I decided to mimic the main interface of one of our existing application, created with the Embarcadero RAD Studio compilers. This application is mainly divided into 4 distinct parts, as follow:
Now I want to add splitters between each part, in a such manner they may be resized, the ones independently of others. For example, I want the top splitter to resize the left top and right top panels, but without resizing the left bottom and right bottom ones.
To create the above interface I wrote the following xaml content:
<Window x:Class="WPFApp.MainWindow"
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:WPFApp"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="53*"/>
</Grid.RowDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left Top</TextBlock>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Row="2">Left Bottom</TextBlock>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Column="2">Right Top</TextBlock>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Column="2" Grid.Row="2">Right Bottom</TextBlock>
<GridSplitter x:Name="MainHorzSplitterTop" HorizontalAlignment="Stretch" Width="5" Grid.Column="1"/>
<GridSplitter x:Name="MainHorzSplitterBottom" HorizontalAlignment="Stretch" Width="5" Grid.Column="1" Grid.Row="2"/>
<GridSplitter x:Name="MainVertSplitterLeft" HorizontalAlignment="Stretch" Height="5" Grid.Row="1"/>
<GridSplitter x:Name="MainVertSplitterRight" HorizontalAlignment="Stretch" Height="5" Grid.Row="1" Grid.Column="2"/>
</Grid>
</Window>
However, when I move e.g the top splitter, the bottom splitter moves together, and the bottom part is resized. How can I modify my code to get the behavior I want?

You could do this by having a grid inside a grid.
So your first grid only consists of three rows. The first would contain a grid with three columns for your two textblocks and a gridsplitter. The second row would be the splitter to resize your two rows. The third would contain another grid with the same setup as for your first row.
It would look like this:
<Window x:Class="Splitted.MainWindow"
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:SplitterProject"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="53*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<TextBlock>Top left</TextBlock>
<GridSplitter VerticalAlignment="Stretch" Width="5" Grid.Column="1"/>
<TextBlock Grid.Column="2">Top right</TextBlock>
</Grid>
<GridSplitter HorizontalAlignment="Stretch" Height="5" Grid.Row="1"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<TextBlock>Bottom left</TextBlock>
<GridSplitter VerticalAlignment="Stretch" Width="5" Grid.Column="1"/>
<TextBlock Grid.Column="2">Bottom right</TextBlock>
</Grid>
</Grid>
You can then resize the top and bottom row independently:

<Window x:Class="SAMPLE.Panels.GridSplitterSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
`<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center"
VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>
</Window>

Misaligned button after compilation

I was creating a simple interface for my app. All went well when I prepared the GUI design, I'm using WPF and its XAML implementations. Problem came up after everything compiled very well and the app's running. There's this one button that goes misaligned when the app's running. I looked for the problem and found nothing. Any idea on how to fix this?
Expected result is on the left, the real result is on floating window. The XAML code of the misaligned button is below the floating window.

<Window x:Class="WPFAlignment.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="3"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3"/>
</Style>
</Grid.Resources>
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="LoadFingerPrint"/>
<Button Grid.Column="1" Content="Load File"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="File Path:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="1"
Text="Key Size:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="2"
Text="Initial Vector:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<DockPanel LastChildFill="True" Grid.Column="1" Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
<Grid Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="1"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Content="128bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="1"
Content="192bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="2"
Content="256bit"
VerticalAlignment="Center"
HorizontalAlignment="Right"/>
</Grid>
<DockPanel LastChildFill="True"
Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Encrypt"/>
<Button Grid.Column="1"
Content="Decrypt"/>
<Button Grid.Column="2"
Content="Abort"/>
</Grid>
</Grid>
</Grid>
Can you try this and see the alignment? You have all those margins set by hand there.. i think that's the issue.
Basically, for positioning use containers : Grid, DockPanel, StackPanel and so on and to be relative inside them, use Alignments as in the example, VerticalAlignment.
Also, in order to set some common value for many Controls use Styles, like i did with the Margin of the Button.

Maximize a window --> the Grid should grow with the Window C# WPF

i have a short question.
I have a Grid definied like this :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
In this Grid is a lot of stuff like Buttons, Textboxes, Menubar, Datagrid and so on.
My question is:
When i maximize the Window, how can i provide a growing Grid?
All the stuff in the Grid is coppled with the margin of the Grid, so if i manually resize the Grid the stuff still stay on the right place, so i just need to now how to let the Grid grow with the Window if the user clicks on this sqaure in the top right of the window to maximize it :)
Edit:
XAML Usercontroll:
<UserControl x:Class="View.PatientListView"
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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d" d:DesignWidth="1625" Height="750">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Width="Auto">
<MenuItem Header="Datei">
<!--<MenuItem.Icon>
<Image Source="datei.jpg" Width="20" Height="20"/>
</MenuItem.Icon>-->
<MenuItem Header="Suchoptionen" Click="MenuItem_Click" >
<MenuItem.Icon>
<Image Source="Suchfeld-Lupe.png"/>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
<Grid Grid.Column="0" Grid.Row="1" Margin="-10,5,10,-5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1258*"/>
<ColumnDefinition Width="367*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="teingabe" x:FieldModifier="public" KeyboardNavigation.TabIndex="1" HorizontalAlignment="right" Height="23" Margin="0,40,130,0" TextWrapping="Wrap" Text="{Binding Suchstring, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="230" ToolTip="Mehrere Eingaben (max. 3) durch "," Trennung: Datensatz1 , Datensatz2 , Datensatz3" TextAlignment="Left" Grid.Column="1">
<TextBox.InputBindings>
<KeyBinding Gesture="Enter"
Command="{Binding Searchcommand}" />
</TextBox.InputBindings>
</TextBox>
<TextBox x:Name="tAnrede" x:FieldModifier="public" KeyboardNavigation.TabIndex="9" HorizontalAlignment="Right" Height="23" Margin="0,400,190,0" TextWrapping="Wrap" Text="{Binding Anrede,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="170" IsEnabled="{Binding Einschalten}" VerticalAlignment="Top" TextAlignment="Left" Grid.Column="1"/>
<TextBox x:Name="tKostentraegerlk" x:FieldModifier="public" KeyboardNavigation.TabIndex="4" HorizontalAlignment="Right" Height="22" Margin="0,175,10,0" TextWrapping="Wrap" Text="{Binding Kostentraegerlk, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="170" IsEnabled="{Binding Einschalten}" TextAlignment="Left" Grid.Column="1">
</TextBox>
<Button x:Name="start" Content="Suche" HorizontalAlignment="right" Margin="0,40,10,0" VerticalAlignment="Top" Width="110" Height="23" Command="{Binding Searchcommand}" Grid.Column="1">
</Button>
After this there only more controlls.
The Window XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:View="clr-namespace:View"
x:Name="Window"
x:Class="StartApplication.MainWindow"
Title="Verwaltung" Height="773" Width="1632" Closing="Window_Closing" KeyDown="Window_KeyDown" >
<View:PatientListView x:Name="plistview" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1622" Height="750"/>
</Window>
Edit:
NVM i saw my mistake ...
Wtf, im so blind. Sorry :(

the important stuff is where your grid is within. in the code below the grid resize with the window
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</Window>