I have a WPF application which is based on multiple grids. So far it works as expected. The application shows some kind of toolbar at the top and an Image control at the center/bottom. When I resize the window, the Image element resizes as well which is perfectly fine.
Now, when I set the ImageSource to the Image control and the image is large (e.g. vertically), this will cause the whole window to resize vertically as well.
How can I allow the user to resize the window (including resizing the image) but NOT allow a resize operation when an image is loaded into the Image control?
<Window x:Class="GrafAoiKyErrorViewer.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:ignore="http://www.galasoft.ch/ignore"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:command="http://www.galasoft.ch/mvvmlight"
xmlns:grafAoiKyErrorViewer="clr-namespace:GrafAoiKyErrorViewer"
mc:Ignorable="d ignore"
ResizeMode="CanResizeWithGrip"
SizeToContent="WidthAndHeight"
Title="Graf AOI KY Error Viewer"
MinWidth="600"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Icon="Images/AnalyzeTrace_16x.png" MinHeight="800"
>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<command:EventToCommand Command="{Binding WindowLoadedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Window.InputBindings>
<KeyBinding Command="{Binding Path=SelectNextCommand}" Gesture="F2" />
<KeyBinding Command="{Binding Path=SelectPreviousCommand}" Gesture="F1" />
</Window.InputBindings>
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
<grafAoiKyErrorViewer:ErrorClassToStringConverter x:Key="ErrorClassToStringConverter" />
</ResourceDictionary>
</Window.Resources>
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="3">Datenbank</Label>
<ComboBox Grid.Row="0" Grid.Column="1" Margin="3" MinWidth="400" ItemsSource="{Binding AoiDatabaseCollection}" DisplayMemberPath="DisplayString" SelectedValue="{Binding AoiDatabaseSelected}" />
<Label Grid.Row="1" Grid.Column="0" Margin="3">Projekt</Label>
<ComboBox Grid.Row="1" Grid.Column="1" Margin="3" MinWidth="400" ItemsSource="{Binding AoiProjectCollection}" DisplayMemberPath="Name" SelectedValue="{Binding AoiProjectSelected}" />
<Label Grid.Row="2" Grid.Column="0" Margin="3">Lot</Label>
<ComboBox Grid.Row="2" Grid.Column="1" Margin="3" MinWidth="400" ItemsSource="{Binding AoiLotCollection}" DisplayMemberPath="Name" SelectedValue="{Binding AoiLotSelected}" />
<Grid Margin="10" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ListView Grid.Column="0" Grid.Row="0" Margin="3" ItemsSource="{Binding ErrorClassCollection}" Height="200" SelectionMode="Single" MinWidth="200">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Item, Converter={StaticResource ErrorClassToStringConverter}}" Header="Fehlerklasse" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="0">
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionErrorClassAllOnCommand}">Alle Ein</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionErrorClassAllOffCommand}">Alle Aus</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionErrorClassRealErrorsOnlyCommand}">Echte Fehler</Button>
</StackPanel>
<ListView Grid.Column="1" Grid.Row="0" Margin="3" ItemsSource="{Binding PositionCollection}" Height="200" SelectionMode="Single" MinWidth="200">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" />
<!--<CheckBox IsChecked="{Binding IsSelected}" Command="{Binding DataContext.FailureSelectionChangedCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}" />-->
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Item}" Header="Position" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionPositionAllOnCommand}">Alle Ein</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionPositionAllOffCommand}">Alle Aus</Button>
</StackPanel>
<ListView Grid.Column="2" Grid.Row="0" Margin="3" ItemsSource="{Binding ArticleCollection}" Height="200" SelectionMode="Single" MinWidth="200">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Item}" Header="Artikel" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="2">
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionArticleAllOnCommand}">Alle Ein</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionArticleAllOffCommand}">Alle Aus</Button>
</StackPanel>
<ListView Grid.Column="3" Grid.Row="0" Margin="3" ItemsSource="{Binding PartTypeCollection}" Height="200" SelectionMode="Single" MinWidth="200">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsSelected}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Item}" Header="Bauform" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="3">
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionPartTypeAllOnCommand}">Alle Ein</Button>
<Button Margin="3" Padding="3" Command="{Binding ModifySelectionPartTypeAllOffCommand}">Alle Aus</Button>
</StackPanel>
</Grid>
<Button Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Margin="3" Padding="3" HorizontalAlignment="Left" Command="{Binding FailureSelectionChangedCommand}">Aktualisieren</Button>
<Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid MinWidth="200">
<!-- DUMMY GRID -->
</Grid>
<Image Grid.Row="0" Grid.Column="1" Source="{Binding CurrentFailureItem.KyAoiFailureImage.Image2DData}" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Image>
<!--<Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</Viewbox>-->
<!--<Border BorderThickness="1" BorderBrush="Black" >
</Border>-->
<Grid Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" MinWidth="100" Margin="3" Padding="3" VerticalAlignment="Center" Command="{Binding SelectPreviousCommand}">Previous</Button>
<TextBlock Grid.Column="1" Margin="3" Padding="3" HorizontalAlignment="Stretch" TextAlignment="Center">
<Run Text="{Binding SelectedFailureItemIndexDisplay, Mode=OneWay}"></Run>
<Run Text=" / "></Run>
<Run Text="{Binding TotalFailureItemIndex, Mode=OneWay}"></Run>
</TextBlock>
<Button Grid.Column="2" MinWidth="100" Margin="3" Padding="3" VerticalAlignment="Center" Command="{Binding SelectNextCommand}">Next</Button>
</Grid>
<StackPanel Grid.Row="0" Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center" Margin="3" MinWidth="200">
<TextBlock Text="{Binding CurrentFailureItem.Position}" FontSize="10" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding CurrentFailureItem.Article}" FontSize="10" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding CurrentFailureItem.PartType}" FontSize="10" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding CurrentFailureItem.ErrorClass}" FontSize="10" FontWeight="Bold"></TextBlock>
</StackPanel>
</Grid>
</Grid>
What you are seeing is actually the intended behaviour of the control however to fix this issue locate this line in your code:
<Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" >
and replace it with this:
<Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" MaxHeight="100">
while setting the MaxHeight to a reasonable value
EDIT:
OK, understand in this case replace the image with a grid and use its background:
<Grid Grid.Row="0" Grid.Column="1">
<Grid.Background>
<ImageBrush ImageSource="{Binding CurrentFailureItem.KyAoiFailureImage.Image2DData}" Stretch="Uniform"></ImageBrush>
</Grid.Background>
</Grid>
Try nesting your Image control within a Viewbox:
<Viewbox>
<Image ImageSource="{Binding MyImage"/>
</Viewbox>
You may need to mess about with the Viewbox Stretch attribute (I always forget which one does what, but you can usually get one to do what you want with a bit of trial and error).
Related
My code is pretty straightforward:
<ListView Grid.Row="0" ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border Grid.Row="0" Margin="0 2 0 2" BorderBrush="Black" BorderThickness="1" x:Name="ListItem" >
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Title}" FontWeight="Bold" FontSize="18" />
<Image Grid.Row="0" Grid.Column="1" Source="../Images/x.png" HorizontalAlignment="Right"/>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.ColumnSpan="2" MaxWidth="{Binding ElementName=ListItem, Path=Width}">
<TextBlock TextWrapping="WrapWithOverflow" Text="{Binding Description}" />
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding TimeStamp}" HorizontalAlignment="Right"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
But the listview width becomes bigger than window's width every times there's an item with long descriptions
Neither the HorizontalContentAlignment setter, nor TextWrapping or MaxWitdh work.
What am I doing wrong??
Disable horizontal scrolling:
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>
I want to disply a HeaderedItemsControlin a DataGridTemplateColumn. However, the following code only shows the header, but not the content. Where did I go wrong?
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<HeaderedItemsControl ItemsSource="{Binding Days[0].Employee}">
<HeaderedItemsControl.Template>
<ControlTemplate TargetType="HeaderedItemsControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Employee"/>
<Button Grid.Column="1"></Button>
</Grid>
</ControlTemplate>
</HeaderedItemsControl.Template>
<HeaderedItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</HeaderedItemsControl.ItemsPanel>
<HeaderedItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</HeaderedItemsControl.ItemTemplate>
</HeaderedItemsControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
You forgot to include ItemsPresenter in your Template. So your control has only header, nothing else. Just adding it back will do the trick:
<ControlTemplate TargetType="HeaderedItemsControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="22" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="Employee" />
<Button Grid.Column="1" />
<ItemsPresenter Grid.Row="1" Grid.ColumnSpan="2" />
</Grid>
</ControlTemplate>
Also, are you sure Days[0].Employee is a collection? It looks strange for sure.
As a bonus, you don't really have to use HeaderedItemsTemplate. Your template is simple enough to make it with basic controls:
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Text="Employee" />
<Button Grid.Column="1" />
<ItemsControl ItemsSource="{Binding Days[0].Employee}" Grid.Row="1" Grid.ColumnSpan="2">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
I want to bind a button command from a listbox item. But my code not work. Can you help me?
My item template definition:
<UserControl.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</UserControl.Resources>
And my listbox declaration:
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Thank you for your help.
It worked fine for me
XAML:
<Window.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Command="{Binding DataContext.CloseButton,RelativeSource={RelativeSource AncestorType=Window, AncestorLevel=1}}" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid Height="200" Width="200" VerticalAlignment="Center">
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<!--<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>-->
</ListBox>
</Grid>
ViewModel
private ICommand closeButton;
public ICommand CloseButton
{
get
{
if (this.closeButton == null)
{
this.closeButton = new RelayCommand<object>(this.ExecuteCloseButton);
}
return this.closeButton;
}
}
private void ExecuteCloseButton(object err)
{
}
I have a user control that is contained in a Window. But I noticed when I maximize and re-size the window, the user control and UI elements don't adjust accordingly as shown here.
What I did try is wrapping the grid in a ViewBox following this tutorial, but the content doesn't re-size accordingly and seems pushed together.
Does anyone know how to resolve this re-sizing issue?
An example of the user control xaml definition:
<UserControl x:Class="MongoDBApp.Views.CustomerDetailsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:email_validator="clr-namespace:MongoDBApp.Validator"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Width="800"
Height="500">
<Viewbox>
<xctk:BusyIndicator IsBusy="{Binding ButtonEnabled}">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height=".50*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height=".2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="17*" />
<ColumnDefinition Width="142*" />
<ColumnDefinition Width="29*" />
<ColumnDefinition Width="171*" />
<ColumnDefinition Width="342*" />
<ColumnDefinition Width="85*" />
</Grid.ColumnDefinitions>
<DockPanel>
<ToolBarTray DockPanel.Dock="Top" Orientation="Horizontal">
<ToolBar>
<Button Command="{Binding RefreshCommand}" ToolTip="Refreshes the customer records.">
<Image Width="30"
Height="30"
Source="/MongoDBApp;component/Images/refresh.png" />
</Button>
</ToolBar>
</ToolBarTray>
</DockPanel>
<DataGrid x:Name="customersgrid"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="1"
Grid.ColumnSpan="4"
AutoGenerateColumns="False"
ItemsSource="{Binding Customers}"
SelectedItem="{Binding SelectedCustomer}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Id}" Header="ID" />
<DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" />
<DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" />
<DataGridTextColumn Binding="{Binding Email}" Header="Email" />
<DataGridTextColumn Binding="{Binding Address}" Header="Address" />
<DataGridTextColumn Binding="{Binding Country}" Header="Country" />
</DataGrid.Columns>
</DataGrid>
<Label Grid.Row="4"
Grid.Column="1"
Margin="51,0,20.672,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Content="First Name:" />
<TextBox x:Name="fNameTbx"
Grid.Row="4"
Grid.Column="3"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text="{Binding SelectedCustomer.FirstName}"
TextWrapping="Wrap" />
<TextBlock x:Name="iDTbx"
Grid.Row="4"
Grid.Column="4"
Width="180"
Height="23"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Text="{Binding SelectedCustomer.Id}"
TextWrapping="Wrap" />
<Label Grid.Row="6"
Grid.Column="4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Country:" />
<ComboBox Grid.Row="6"
Grid.Column="4"
Width="180"
Height="30"
Margin="84,9,84,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
DisplayMemberPath="Name"
ItemsSource="{Binding Countries}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
Text="{Binding SelectedCustomer.Country}" />
<Button x:Name="addBtn"
Grid.Row="7"
Grid.Column="1"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Command="{Binding AddCommand}"
Content="Add" />
</Grid>
</Grid>
</xctk:BusyIndicator>
</Viewbox>
</UserControl>
And the Window that holds the UserControl:
<Window x:Class="MongoDBApp.Views.ApplicationView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:MongoDBApp.Views"
xmlns:vm="clr-namespace:MongoDBApp.ViewModels"
Title="ApplicationView"
Width="800"
Height="500">
<Window.Resources>
<DataTemplate DataType="{x:Type vm:CustomerDetailsViewModel}">
<views:CustomerDetailsView />
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<vm:ApplicationViewModel />
</Window.DataContext>
<TabControl ItemsSource="{Binding PageViewModels}"
SelectedItem="{Binding CurrentPageViewModel}"
TabStripPlacement="Top">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<Setter Property="IsEnabled" Value="{Binding IsEnabled}" />
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
</Window>
At first, it is not correct to set Height of RowDefinition large numbers cause you want resizable Window and so you need declare Height and Width in proportion. There are no proportion like Height="70*" or Width=342*.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<DockPanel>
<ToolBarTray DockPanel.Dock="Top" Orientation="Horizontal">
<ToolBar>
<Button Command="{Binding RefreshCommand}" ToolTip="Refreshes the customer records.">
<Image Width="30"
Height="30"
/>
</Button>
</ToolBar>
</ToolBarTray>
</DockPanel>
<DataGrid x:Name="customersgrid"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="1"
Grid.ColumnSpan="4"
AutoGenerateColumns="False"
ItemsSource="{Binding Customers}"
SelectedItem="{Binding SelectedCustomer}">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Id}" Header="ID" />
<DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" />
<DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" />
<DataGridTextColumn Binding="{Binding Email}" Header="Email" />
<DataGridTextColumn Binding="{Binding Address}" Header="Address" />
<DataGridTextColumn Binding="{Binding Country}" Header="Country" />
</DataGrid.Columns>
</DataGrid>
<Label Grid.Row="4"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Content="First Name:" />
<TextBox x:Name="fNameTbx"
Grid.Row="4"
Grid.Column="3"
MinWidth="20"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text="{Binding SelectedCustomer.FirstName}"
TextWrapping="Wrap" />
<TextBlock x:Name="iDTbx"
Grid.Row="4"
Grid.Column="4"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Text="{Binding SelectedCustomer.Id}"
TextWrapping="Wrap" />
<Label Grid.Row="6"
Grid.Column="4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Country:" />
<ComboBox Grid.Row="6" Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
DisplayMemberPath="Name"
ItemsSource="{Binding Countries}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
Text="{Binding SelectedCustomer.Country}" />
<Button x:Name="addBtn"
Grid.Row="7"
Grid.Column="1"
HorizontalAlignment="Left"
Command="{Binding AddCommand}"
Content="Add" />
</Grid>
Then, it is not necessary to set size for your UserControl, if you want to be UserControl resizable. So remove this settings:
Width="800"
Height="500"
Good example of Resizable Window:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
<Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
<Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
<TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
<Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right"
MinWidth="80" Margin="3" Content="Send" />
</Grid>
See this tutorial.
You've got specified:
Width="800"
Height="500"
in the UserControl. Maybe it's the reason of such behavior.
I use a ListView.GroupStyle in conjunction with a HeaderTemplate to style ListView Headers.
<ListView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource headerTemplate}" />
</ListView.GroupStyle>
...
<DataTemplate x:Key="headerTemplate">
<Border Opacity=".9" Padding="0,5,0,5" Margin="0" BorderThickness="0" BorderBrush="LightGray" HorizontalAlignment="Stretch" Background="#ffffff">
<Grid Margin="3" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Text="{Binding Path=Name}"
HorizontalAlignment="Right"/>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<Button Margin="5" Padding="5"
HorizontalAlignment="left"
Content="{Binding ???}"
Command="{Binding ???}" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>
Now I would like to put controls in that headerTemplate - e.g. a Button to execute actions to all entries within that group. How do I do this? How is Binding done within a GroupStyle HeaderTemplate?
You can use a RelativeSource Binding to access the DataContext of the GridView from the HeaderTemplate:
<DataTemplate x:Key="headerTemplate">
<Border Opacity=".9" Padding="0,5,0,5" ...>
<Grid Margin="3" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Text="{Binding Name}"
HorizontalAlignment="Right"/>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<Button Margin="5" Padding="5"
HorizontalAlignment="left"
Content="{Binding DataContext.SomeProperty, RelativeSource={
RelativeSource AncestorType={x:Type GridView}}}"
Command="{Binding DataContext.AnotherProperty, RelativeSource={
RelativeSource AncestorType={x:Type GridView}}}" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>