Develop Reference

How can I improve the layout for this Input Screen?

Right now I have this XAML layout for my WPF application:
<Window x:Class="Cabrillo_Editor.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:Cabrillo_Editor"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_Exit" Click="ExitApplication"/>
<MenuItem Header="_New"/>
<MenuItem Header="_Save" Click="SaveCabrilloFile"/>
</Menu>
<StackPanel>
<GroupBox Height="Auto" Header="General">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="185"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0" Margin="0,0,0,5">
<Label>My Call:</Label>
<TextBox Width="120" Name="CallsignTextBox" HorizontalAlignment="Right" CharacterCasing="Upper"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="0">
<Label>My Grid:</Label>
<TextBox Width="120" Name="GridTextBox" HorizontalAlignment="Right"/>
</DockPanel>
<DockPanel Grid.Row="0" Grid.Column="2">
<Label>Contest:</Label>
<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="2">
<Label>Assisted:</Label>
<CheckBox VerticalAlignment="Center" Name="AssistedCheckBox" Margin="5,0,0,0"/>
</DockPanel>
<DockPanel Grid.Row="0" Grid.Column="4">
<Label>Band:</Label>
<ComboBox Width="150" Name="BandComboBox" Margin="5,0,0,0"/>
</DockPanel>
</Grid>
</GroupBox>
</StackPanel>
</DockPanel>
</Window>
And it looks like this:
Why, for example, is are the ComboBoxes so streched if I set the row height to "Auto" (same for the TextBoxes)?
Is there a better way to make consistent horizontal space between the columns?

This is occurring because those controls will stretch to fill their parent container by default. To override this, simply set the VeriticalAlignment property and Height property (if needed).
<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0" VerticalAlignment=Top/>

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>

Popup window Control template

I have a button and Popup window with a ListBox. The data source and button commands I take from the ViewModel. I need a few more of these buttons with other sources for the ListBox and other VM buttons command. How do I reuse this code without Ctr+C Ctrl+V ? How to create Control/Data template for this Popup?
<Window x:Class="WpfApplication2.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<StackPanel Margin="10">
<ToggleButton Content="Districts..." x:Name="DistrictButton"/>
<Popup IsOpen="{Binding IsChecked, ElementName=DistrictButton}" PlacementTarget="{Binding ElementName=DistrictButton}" StaysOpen="True">
<Border BorderThickness="1" Background="White" Padding="10">
<Grid Width="400" Height="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Grid.ColumnSpan="4" ItemsSource="{Binding FilterModel.Districts}"/>
<Button Grid.Row="1" Content="Select all" Margin="0,10,0,0" Command="{Binding SelectAllDistrictsCommand}"/>
<Button Grid.Row="1" Grid.Column="2" Content="OK" Margin="0,10,0,0" Command="{Binding OKDistrictsCommand}"/>
<Button Grid.Row="1" Grid.Column="3" Content="Cancel" Margin="5,10,0,0" Command="{Binding CancelDistrictsCommand}"/>
</Grid>
</Border>
</Popup>
</StackPanel>
<!-- Popup again with another DataSource -->
</Grid>

how to update xaml in uwp

I have created a application for windows 10 (uwp) devices. I´m using the windows appstudio "designer". Now, I have to update the source code by a combobox and the correct eventhandler.
The combobox items contains different urls. After the selection changed, I have to parse entries from a url.
Layout-file:
<Page
x:Class="App.Pages.NeuigkeitenListPage"
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:was_actions="using:AppStudio.Uwp.Actions"
xmlns:was_commands="using:AppStudio.Uwp.Commands"
xmlns:was_controls="using:AppStudio.Uwp.Controls"
xmlns:list_layouts="using:Wallfahrtsapp.Layouts.List"
xmlns:controls="App.Layouts.Controls"
xmlns:vm="using:App.ViewModels"
xmlns:triggers="using:App.Triggers"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
d:DataContext="{d:DesignData Source=/Assets/Design/DesignData.json, Type=vm:DesignViewModel, IsDesignTimeCreatable=true}"
mc:Ignorable="d">
<Page.Resources>
<was_controls:VisualBreakpoints x:Name="ResponsiveBehaviorsVBP" ConfigFile="/Assets/ResponsiveBehaviorsVBP.json"></was_controls:VisualBreakpoints>
</Page.Resources>
<Grid Background="{StaticResource AppBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2" Background="{StaticResource AppBarBackground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="48"/>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="{Binding Active.pageTitleMargin, Source={StaticResource ResponsiveBehaviorsVBP}}" Text="{x:Bind ViewModel.PageTitle}" Foreground="{StaticResource AppBarForeground}" FontSize="{StaticResource AppTitleTextSizeDefault}" VerticalAlignment="Center" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" MaxLines="1"/>
<was_actions:ActionsCommandBar
x:Name="appBar"
ActionsSource="{x:Bind ViewModel.Actions}" Style="{StaticResource WasCommandBarStyle}"
Foreground="{StaticResource AppBarForeground}"
IsVisible="{x:Bind ViewModel.HasActions}"
Background="{StaticResource AppBarBackground}"
Grid.Row="{Binding Active.appBarRow, Source={StaticResource ResponsiveBehaviorsVBP}}"
Grid.Column="{Binding Active.appBarColumn, Source={StaticResource ResponsiveBehaviorsVBP}}"
Grid.ColumnSpan="{Binding Active.appBarColumnSpan, Source={StaticResource ResponsiveBehaviorsVBP}}" Opened="appBar_Opened">
</was_actions:ActionsCommandBar>
<ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="3"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ProgressBar Grid.Row="1" Height="3" Margin="0,6,0,6" IsIndeterminate="True" Foreground="{StaticResource PageTitleForeground}" Visibility="{x:Bind ViewModel.IsBusy, Converter={StaticResource BoolToVisibilityConverter}, FallbackValue=Collapsed, Mode=OneWay}"/>
<was_controls:ErrorNotificationControl x:Uid="ListErrorNotificationControl" Grid.Row="2" ErrorVisibility="{x:Bind ViewModel.HasLoadDataErrors, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" ErrorColor="{StaticResource PageTitleForeground}" Margin="10,0,18,0"/>
<list_layouts:ListContactCard Grid.Row="1" ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}" ItemClickCommand="{x:Bind ViewModel.ItemClickCommand}" OneRowModeEnabled="False" Margin="31,0,0,3" Grid.RowSpan="3" />
<ListBox></ListBox>
</Grid>
</ScrollViewer>
<TextBlock HorizontalAlignment="Left"
x:Name="source"
TextWrapping="Wrap"
Text="Newsquelle auswählen:"
VerticalAlignment="Top"
FontFamily="Segoe UI"
FontStyle="Oblique"
Padding="40" Margin="384,-30,0,0" Height="78"
/>
<ComboBox x:Name="sourceComboBox"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="200"
SelectionChanged="selectionChanged"
>
<ComboBoxItem Content="Url1"/>
<ComboBoxItem Content="Url2"/>
</ComboBox>
<controls:DataUpdateInformationControl Grid.Row="2" Grid.ColumnSpan="2" LastUpdateDateTime="{x:Bind ViewModel.LastUpdated, Mode=OneWay}" Color="{StaticResource PageTitleForeground}" Margin="8,4,8,4" HorizontalAlignment="Left" HasLocalData="{x:Bind ViewModel.HasLocalData}"/>
</Grid>
C#- file: Eventhandler
private void selectionChanged (object sender , SelectionChangedEventArgs args)
{
index = sourceComboBox.SelectedIndex;
Debug.WriteLine("selectionChangedEventMethod");
newsblogHTTP(index);
}
But how can I update my layout with the new content?
If you need more code snippets let´s see the repo for my project.
layout-file : https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Pages/NeuigkeitenListPage.xaml
https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Pages/NeuigkeitenListPage.xaml.cs
C#-Config file:
https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Sections/NeuigkeitenConfig.cs
Thanks for your help!

WPF XAML Object reference not set to an instance of an object

I've encountered this problem during development, the problem the compiler gives, is that an object reference is not set, So it should be some kind of null pointer
<Window x:Class="BattleShip.MVVM.Views.NewGameSettings"
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:viewModels="clr-namespace:BattleShip.MVVM.ViewModels"
mc:Ignorable="d"
Title="New Game" ResizeMode="NoResize" SizeToContent="WidthAndHeight" WindowStartupLocation="CenterScreen">
<Window.DataContext>
<viewModels:SettingsViewModel/>
</Window.DataContext><Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="80" Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition MinHeight="30" Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="80" Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" Source="{StaticResource Background}" Height="120" Stretch="Fill"/>
<Label
x:Name="HeightLabel"
Content="Height"
Grid.Column="1" Grid.Row="1"
Margin="0,10,0,0"/>
<Label
x:Name="WidthLabel"
Content="Width"
Grid.Column="1" Grid.Row="2"
Margin="0,10,0,0"/>
<Label
x:Name="DifficultyLabel"
Content="AI Difficulty"
Grid.Column="1" Grid.Row="3"
Margin="0,10,0,0"/>
<TextBox x:Name="LengthBox"
TextWrapping="NoWrap"
VerticalContentAlignment="Center"
IsInactiveSelectionHighlightEnabled="True"
Grid.Column="2"
Grid.Row="1"
HorizontalAlignment="Left"
Width="100"
Text="{Binding Height}"
Margin="0,10,0,0"/>
<TextBox x:Name="HeightBox"
TextWrapping="NoWrap"
VerticalContentAlignment="Center"
Text="{Binding Width}"
Grid.Column="2" Grid.Row="2"
HorizontalAlignment="Left"
Width="100"
Margin="0,10,0,0"/>
<ComboBox ItemsSource="{Binding Difficulties}"
SelectedItem="{Binding SelectedDifficulty}"
Grid.Column="2" Grid.Row="3"
VerticalContentAlignment="Center"
HorizontalAlignment="Left"
Width="100"
Margin="0,10,0,0"/>
<Button Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="2" Content="Start" Margin="0,10,0,0" Command="{Binding StartGameCommand}"/>
</Grid>
This is the code where it gives the error (line of ). How can I solve this problem since I initialized this view model?

If you have correct ViewModel, the compiler error may be caused by Visual Studio's bug, happened in VS 2015,VS2013, etc.So the solution is :
Try to delete .suo file and then restart Visual Studio.