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>
Related
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/>
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>
I am trying to find the index of the StackPanel in an ListView which is filled with an binding to public ObservableCollection<Artikel> Artikels { get; set; } = new ObservableCollection<Artikel>();.
<Window x:Class="KassaBlokboek.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:KassaBlokboek"
mc:Ignorable="d"
WindowState="Maximized" ResizeMode="NoResize"
WindowStyle="None" WindowStartupLocation="CenterScreen"
Title="MainWindow" Height="350" Width="525"
MinWidth="768"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="7*"/>
</Grid.RowDefinitions>
<Image Source="Resources/LogoNew.jpg" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<TextBox PreviewTextInput="TextBox_OnPreviewTextInput" Name="TextBox" KeyDown="ProductScanned" HorizontalAlignment="Center" Grid.Row="0" Width="768" Height="64" VerticalAlignment="Bottom" Margin="0,-25,0,5"></TextBox>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Click="ScrollUp" x:Name="HoofdButton" Grid.Row="0" Grid.Column="0">Product naar boven</Button>
<ListView ScrollViewer.VerticalScrollBarVisibility="Hidden" x:Name="listView" Grid.Row="0" Grid.RowSpan="5" Grid.Column="1"
ItemsSource="{Binding Artikels}">
<ListView.ItemTemplate>
<DataTemplate DataType="local:Artikel">
<Grid Height="{Binding ElementName=HoofdButton, Path=ActualHeight}" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Naam}"></TextBlock>
<TextBlock Text="{Binding Prijs, StringFormat=€0.00}"></TextBlock>
<TextBlock Text="{Binding Barcode}"></TextBlock>
<TextBlock Text="{Binding Aantal}"></TextBlock>
</StackPanel>
<Button Click="Verwijder" Grid.Column="1">Verwijder</Button>
<Button Click="WijzigAantal" Grid.Column="2" Margin="25,0,0,0">Aantal</Button>
<Button Click="VerhoogAantal" Grid.Column="3" Margin="25,0,0,0">+</Button>
<Button Click="VerlaagAantal" Grid.Column="4" Margin="25,0,0,0">-</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Button Click="ScrollDown" Grid.Row="4" Grid.Column="0">Product naar beneden</Button>
<StackPanel Grid.Row="5" Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Click="BetaalContant" Width="128">Contant</Button>
<Button Width="128" Margin="25,0,0,0" Click="BetaalPinnen">Pinnen</Button>
<Button Width="128" Margin="25,0,0,0" Click="Retour">Retour</Button>
</StackPanel>
<TextBlock x:Name="totaalPrijs" Margin="10,9.8,0,0" Grid.Row="5" Grid.Column="0" Text="Totaalprijs: €0.00"/>
</Grid>
</Grid>
</Window>
I need to find the index of the StackPanel, so i can edit the text in the "Aantal" TextBlock in the StackPanel.
how can I make the scrollviewer resize to the bottom edge of the screen, so as to maximize to resize with the mouse ? The way the code is, when the screen is maximized the scroll bar does not appear and it is not possible to scroll the contents.
My xaml File
<Window x:Class="AppSearch.MainWindow" x:Name="mainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AppSearch" Height="600" Width="820"
WindowStartupLocation="CenterScreen"
Loaded="Window_Loaded"
StateChanged="mainWindow_StateChanged"
ResizeMode="CanResize"
PreviewKeyDown="mainWindow_PreviewKeyDown">
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="stkContentLeft"
MinWidth="510"
MinHeight="560"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
LoadCompleted="stkContentLeft_LoadCompleted"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0,0,05,0" Grid.Column="0"/>
<StackPanel Grid.Column="1" x:Name="stckContentRight" Width="276"
Height="{Binding Parent.ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Orientation="Vertical"
HorizontalAlignment="Right">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackPanel Height="auto" Grid.Row="0">
<StackPanel x:Name="help" Width="20" Height="20" HorizontalAlignment="Right" Margin="0,5,10,0">
<Image Source="Imagens/help_icon.png"/>
</StackPanel>
<StackPanel x:Name="stkUcSupervisor" Height="50" Width="276" Margin="0,5,0,0" HorizontalAlignment="Center"/>
<TextBox x:Name="txtSearch"
ToolTip="put your key..."
FontSize="13"
Foreground="Black"
BorderThickness="1"
TextWrapping="Wrap"
Margin="0,5,0,05" Width="270" HorizontalAlignment="Center"/>
</StackPanel>
<ScrollViewer x:Name="scroll"
CanContentScroll="True"
IsDeferredScrollingEnabled="False"
UseLayoutRounding="False"
VerticalScrollBarVisibility="Visible"
VerticalAlignment="Top"
BorderThickness="1"
BorderBrush="Gray"
Margin="0,05,0,0"
Grid.Row="1"
Height="455">
<StackPanel x:Name="stkListOfUserControls"
CanVerticallyScroll="True"
Height="455"
OverridesDefaultStyle="False">
<StackPanel.ScrollOwner>
<ScrollViewer AllowDrop="True" />
</StackPanel.ScrollOwner>
</StackPanel>
</ScrollViewer>
</Grid>
</StackPanel>
<StackPanel x:Name="stkPopUp"
Canvas.Bottom="0"
Canvas.Left="0"
Height="285"
Width="280"
VerticalAlignment="Bottom"/>
</Grid>
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>