Listbox resizing automatically, button doesn't - wpf

I've got a ListBox with CheckBoxes in it which resizes automatically when I resize the Window.
I found the CheckedListBox XAML code on StackOverflow I think and I didn't modify it, and I'd like the same thing for all the UI elements.
I've read something about setting Anchors. As I already said, I didn't do anything to the XAML code, neither did I set any Anchors?
Is there anything in the XAML code which I'm not seeing which is responsible for the resizing?
<Grid>
<TextBox Height="23" HorizontalAlignment="Left" Margin="12,28,0,0" Name="textBox1" VerticalAlignment="Top" Width="238" />
<Label Content="Profilname" Height="28" HorizontalAlignment="Left" Margin="12,0,0,0" Name="label1" VerticalAlignment="Top" />
<ListBox ItemsSource="{Binding datasource}" Margin="12,57,12,41" Name="checkedListBox1" Opacity="0.7">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Path=Item}" IsChecked="{Binding IsChecked}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="save" Margin="12,302,12,12" Name="button3" Click="button3_Click" />
</Grid>
Thanks in advance!

You are doing it like a Canvas, but you are using a Grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Content="Profilname" Name="label1" Grid.Row="0" />
<TextBox Name="textBox1" Grid.Row="1" />
<ListBox ItemsSource="{Binding datasource}" Name="checkedListBox1" Grid.Row="2" >
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Path=Item}" IsChecked="{Binding IsChecked}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="save" Name="button3" Click="button3_Click" Grid.Row="3" />
</Grid>
See now everything resizes.
You can add margin and padding now as desired for styling.

Related

Expander scrolling problems

I have a an Expander inside a Stackpanel, inside a ScrollViewer.
Now when I move my mouse over the expanded expander, the scrolling of the scrollviewer doesnt work anymore.
Can someone help me understand why?
<ScrollViewer VerticalScrollBarVisibility="Auto" Name="Scroller">
<StackPanel Name="Panel1">
<Expander Header="{Binding Source={x:Static properties:Strings.GeneralSettings}}" IsExpanded="True">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Grid.Column="0" Grid.Row="0" Text="{Binding ProjectDataService.CurrentProject.ProjectName,Mode=TwoWay}" material:TextFieldAssist.Hint="Projektname" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding ProjectDataService.CurrentProject.ProjectLead,Mode=TwoWay}" material:TextFieldAssist.Hint="Projektleitung" Margin="10" />
<TextBox Grid.Column="0" Grid.Row="1" Text="{Binding ProjectDataService.CurrentProject.City,Mode=TwoWay}" material:TextFieldAssist.Hint="Ort" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding ProjectDataService.CurrentProject.ZipCode,Mode=TwoWay}" material:TextFieldAssist.Hint="Postleitzahl" Margin="10" />
<TextBox Grid.Column="0" Grid.Row="2" Text="{Binding ProjectDataService.CurrentProject.Street,Mode=TwoWay}" material:TextFieldAssist.Hint="Strasse" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="2" Text="{Binding ProjectDataService.CurrentProject.HouseNumber,Mode=TwoWay}" material:TextFieldAssist.Hint="Hausnummer" Margin="10" />
<TextBox Grid.Column="0" Grid.Row="3" Text="{Binding ProjectDataService.CurrentProject.ContactName,Mode=TwoWay}" material:TextFieldAssist.Hint="Ansprechpartner vor Ort" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="3" Text="{Binding ProjectDataService.CurrentProject.ContactEmail,Mode=TwoWay}" material:TextFieldAssist.Hint="Kontaktemail" Margin="10" />
<ComboBox Grid.Column="0" Grid.Row="4" Margin="10" SelectedItem="{Binding ProjectDataService.CurrentProject.ProjectStatus,Mode=TwoWay}" material:TextFieldAssist.Hint="Projektstand">
<ComboBoxItem Content="Abgenommen" />
<ComboBoxItem Content="Eingebaut" />
</ComboBox>
</Grid>
</StackPanel>
</Expander>
</StackPanel>
</ScrollViewer>
I found out, that it is the MaterialDesign Framework, which breaks the scrolling. To enable the framework I need to put
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
into the application.ressources.
the second line breaks the scrolling
I had the same issue. It is a bug in the material design nuget: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/issues/1395
it is fixed in the current preview for materialdesignthemes 3.0. Check "include prerelease" in nuget manager to be able to select the preview versions for this nuget package.

Multiple TabItems bound to same ViewModel are not updating the first time a tab is selected

I have a tabcontrol with 3 tabs on it. Each tabitem contains a different contentcontrol, all of which are bound to the same ViewModel, and there are some items in all 3 contentcontrols that are bound to the same property.
My problem is, if I change a comboBox on the initial tab, that change is not reflected on the other tabs, they still have their SelectedItem set to the default value. This only happens the first time I switch to that tab. After I have selected a tab once, everything works as expected; changes made on one tab are reflected on the other tab.
I am trying to avoid too much code-behind, and I have searched and tried all of the solutions regarding delaying of the binding, or updating the binding when the tab is selected, but I have had no luck.
Here is my TabControl:
<TabControl Grid.Row="1" Margin="0,10">
<TabItem Header="Tab1" IsSelected="True">
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource Tab1}" />
</TabItem>
<TabItem Header="Tab2">
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource Tab2}" />
</TabItem>
<TabItem Header="Tab3">
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource Tab}" />
</TabItem>
</TabControl>
And here is one of the ContentControls:
<DataTemplate x:Key="Tab3" DataType="{x:Type vm:MainViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Flow" Style="{StaticResource tabLabel}" />
<TextBox Grid.Column="1" Grid.Row="0" Style="{StaticResource tabTextBox}" />
<ComboBox Grid.Column="2" Grid.Row="0" Style="{StaticResource tabUnitComboBox}" ItemsSource="{Binding DataList1}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedData1}" />
<ComboBox Grid.Column="0" Grid.Row="1" Style="{StaticResource tabComboBox}" ItemsSource="{Binding DataList2}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedData2}" />
<TextBox Grid.Column="1" Grid.Row="1" Style="{StaticResource tabTextBox}" />
<Label Grid.Column="2" Grid.Row="1" Content="m³/h" Style="{StaticResource tabUnitLabel}" Visibility="{Binding SelectedData2, Converter={StaticResource VisibilityConverter}}" />
<ComboBox Grid.Column="0" Grid.Row="2" Style="{StaticResource tabComboBox}" ItemsSource="{Binding DataList3}" SelectedItem="{Binding SelectedData3}" />
<TextBox Grid.Column="1" Grid.Row="2" Style="{StaticResource tabTextBox}" />
<ComboBox Grid.Column="2" Grid.Row="2" Style="{StaticResource tabUnitComboBox}" ItemsSource="{Binding DataList4}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedData4}" />
<Label Grid.Column="0" Grid.Row="3" Content="Temperature" Style="{StaticResource tabLabel}" />
<TextBox Grid.Column="1" Grid.Row="3" Style="{StaticResource tabTextBox}" />
<ComboBox Grid.Column="2" Grid.Row="3" Style="{StaticResource tabUnitComboBox}" ItemsSource="{Binding DataList5}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedData5}" />
</Grid>
</DataTemplate>
The ViewModel is pretty much standard, inheriting from ObservableObject and implementing OnPropertyChanged. As I said, everything works perfectly after selecting a tab once, but I would really like to get it working from the start.
Any suggestions would be greatly appreciated. Thanks.
In case you want to use that comment as and answer
Are you by any chance just starting with assigning the backing field.
Not firing INPC on the initial load.

binding:text block to listbox wpf

I am new to WPF. I have this code
<Window x:Class="ElementBinding.MultipleBindings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MultipleBindings" Height="320" Width="300">
<Grid>
<Slider Name="sliderFontSize" Margin="0,12,6,243"
Minimum="1" Maximum="40" Value="10"
TickFrequency="1" TickPlacement="TopLeft">
</Slider>
<TextBox Name="txtContent" Margin="0,44,0,208">Color should change here</TextBox>
<TextBlock Margin="3,150,3,3" Name="lblSampleText"
FontSize="{Binding ElementName=sliderFontSize, Path=Value}"
Text="{Binding ElementName=txtContent, Path=Text,Mode=TwoWay}"
Foreground="{Binding ElementName=lstColors, Path=SelectedItem.Tag}" >
Multiple Bindings
</TextBlock>
<ListBox Height="54" HorizontalAlignment="Left" Margin="12,90,0,0" Name="lstColors" VerticalAlignment="Top" Width="120" >
<ListBoxItem>Green</ListBoxItem>
<ListBoxItem>Red</ListBoxItem>
<ListBoxItem>Blue</ListBoxItem>
</ListBox>
</Grid>
</Window>
Text block will not appear if I select an item in list box. I think problem is in 'SelectedItem.Tag'. How can I resolve this?
You are correct. It should be Path=SelectedItem.Content:
<TextBlock Margin="3,150,3,3" Name="lblSampleText"
FontSize="{Binding ElementName=sliderFontSize, Path=Value}"
Text="{Binding ElementName=txtContent, Path=Text,Mode=TwoWay}"
Foreground="{Binding ElementName=lstColors, Path=SelectedItem.Content}" >
some advices
dont use just Margin to arrange your controls, look at Layout with Panels(Grid,DockPanel, and so on)
dont use the fontsize and a slider to create something like a zoom, better use LayoutTransform with ScaleTransform
at least Shakti is right the binding should be to SelectedItem.Content
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Slider Name="sliderFontSize" Grid.Row="0" TickPlacement="TopLeft"
Minimum="1" Maximum="5" Value="1"
TickFrequency="1">
</Slider>
<TextBox Name="txtContent" Grid.Row="1">Color should change here</TextBox>
<TextBlock Grid.Row="3" Name="lblSampleText"
Text="{Binding ElementName=txtContent, Path=Text,Mode=TwoWay}"
Foreground="{Binding ElementName=lstColors, Path=SelectedItem.Content}" >
<TextBlock.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=sliderFontSize, Path=Value}" ScaleY="{Binding ElementName=sliderFontSize, Path=Value}"/>
</TextBlock.LayoutTransform>
</TextBlock>
<ListBox Height="54" HorizontalAlignment="Left" Name="lstColors" VerticalAlignment="Top" Width="120" Grid.Row="2">
<ListBoxItem>Green</ListBoxItem>
<ListBoxItem>Red</ListBoxItem>
<ListBoxItem>Blue</ListBoxItem>
</ListBox>
</Grid>

Silverlight/WP7: I want to place an Button after the Listbox element which are data bound

I am fairly new to silverlight. I am developing on the windows phone platform.
I want to place a button at the end of the listbox entries which will be bound to data from the webservice (I am using a listbox template)
List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
List item 7
List item 8
..Button..
I tried number of things of using grid/stackpanel etc to host the button and all my solutions place the button at the bottom of my screen instead of bottom of all the listbox entries which might span multiple screens.
XAML file I have is below. I want to add a button below the "LBoxItems"
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="ads" >
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Margin="24,24,0,12"
x:Name="SearchTitle">
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="{Binding Location}" />
<TextBlock FontSize="{StaticResource PhoneFontSizeLarge}"
Text=" > " />
<TextBlock FontWeight="Bold"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="{Binding Category}" />
</StackPanel>
<TextBlock FontSize="{StaticResource PhoneFontSizeMedium}"
Text="{Binding Converter={StaticResource SearchHistoryItemSubTitleConverter}}" />
</StackPanel>
</Grid>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid"
Grid.Row="2">
<ListBox x:Name="LBoxItems"
HorizontalAlignment="Left"
Margin="24, 0"
SelectionChanged="LBoxItems_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="{StaticResource PhoneTouchTargetOverhang}" >
<TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="{StaticResource PhoneAccentBrush}"
Text="{Binding Title.Text}" TextWrapping="Wrap" Margin="-4,20,0,0">
</TextBlock>
<TextBlock Text="{Binding PublishDate, Converter={StaticResource ItemPublishDateConverter}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<l:SpinnerControl x:Name="SpinnerControl"
Width="55"
Height="55"
Grid.RowSpan="2" />
<TextBlock x:Name="TxtNoResultsMessage"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="No results found"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Grid.RowSpan="2"
Visibility="Collapsed" />
</Grid>
You could use a ScrollViewer:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="800"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ListBox Grid.Row="0">
</ListBox>
<Button Grid.Row="1" Height="30" Content="Test"></Button>
</Grid>
</ScrollViewer>
Simply divide the Grid inside into two rows, the second one being for the Button.
For your specific case it would be:
<Grid x:Name="ContentGrid"
Grid.Row="2">
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="600"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ListBox x:Name="LBoxItems"
HorizontalAlignment="Left"
Margin="24, 0"
SelectionChanged="LBoxItems_SelectionChanged" Grid.Row="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="{StaticResource PhoneTouchTargetOverhang}" >
<TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="{StaticResource PhoneAccentBrush}"
Text="{Binding Title.Text}" TextWrapping="Wrap" Margin="-4,20,0,0">
</TextBlock>
<TextBlock Text="{Binding PublishDate, Converter={StaticResource ItemPublishDateConverter}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Sample" Height="30" Grid.Row="1" />
</Grid>
</ScrollViewer>
</Grid>
Of course, you can set the appropriate height depending on your situation.
What you want to do, really is to mix and match different items in the DataTemplate. If you're not really happy with how the other solutions work out I might consider adding a button to the datatemplate, but set its visibility to collapsed. Then for the very last entry, set its visibility to visible.
Either way you are in for a bit of a hack, but this way the button is in your list box. If all the button events point to the same handler, and only one is visible, you should be good to go.
I had the same problem and tried using the ScrollViewer approach, however I couldn't get rid of the 'stuck scrolling' issue until I disabled the vertical scrollbar on the listbox. Maybe this will help others too.

WPF ListBox: how to update data with binding

I have listbox that displays information about list of objects:
<ListBox Grid.Column="0" Height="152" Name="CustomersList" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name, Mode=OneWay}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I would show more detailed information about selected item in another block, but I don't know (and can't find) how to bind selected item to those block data context. I guess it should be something like this:
<Grid Grid.Column="1" DataContext="{Binding Path=ItemSelected, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Id" VerticalAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=Id}" VerticalAlignment="Center"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Name" VerticalAlignment="Center"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=Name}" VerticalAlignment="Center"/>
<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="Add new" />
<Button Content="Store changes" />
</StackPanel>
</Grid>
But the problem is that data item to be binded to the grid is not specified anywhere and I don't know how to do that.
Any suggestion would be wellcome.
Thanks!
P.S. I've tried to specify CustomersList.ItemsSource as DataContext for the Grid - this didn't give any result.
You can bind to the SelectedItem property of the ListBox, one way is using ElementName.
<Grid DataContext="{Binding ElementName=CustomersList, Path=SelectedItem}"> </Grid>

Resources