StackPanel Collapsed and Visible on Button Click - c#

I am trying to show one collapsed stackpanel on button click, but I'm having problems so I tried reverse my thoughts and I was able to collapse an visible stackpanel. But unfortunately I was unable to implement the behavior I want, show an collapsed stack panel on button click. To the code :D
XAML
<Button x:Name="sentButton" Content="Add Friend" Style="{DynamicResource FlatButtonStyle}" Margin="493,0,0,0" HorizontalAlignment="Left" Width="106"/>
<StackPanel Style="{DynamicResource stackCollapsed}" Visibility="Collapsed">
<Label Content="Invite Friends" FontWeight="Bold" Margin="0,0,477,0" Height="32" />
<StackPanel Orientation="Horizontal" Margin="26,0,0,0">
<Label Content="Enter your friend's email" Width="222" Height="25" />
<TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" Style="{DynamicResource MyTextBox}" x:Name="textBoxEmail" Width="298"/>
<Button x:Name="button1" Content="Send" Command="{Binding AddCommand}" Width="77" Style="{DynamicResource FlatButtonStyle}" Margin="20,0,0,0"/>
</StackPanel>
</StackPanel>
Styles
<!-- Style Collapsed-->
<Style x:Key="stackCollapsed" TargetType="StackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=sentButton,Path=IsPressed}" Value="true">
<Setter Property="StackPanel.Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>

Instead of Button use ToggleButton and bind StackPanel.Visibility to ToggleButton.IsChecked property via BooleanToVisibilityConverter converter
<ToggleButton x:Name="sentButton" Content="Add Friend" Margin="493,0,0,0" HorizontalAlignment="Left" Width="106"/>
<StackPanel Visibility="{Binding ElementName=sentButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
<Label Content="Invite Friends" FontWeight="Bold" Margin="0,0,477,0" Height="32" />
<StackPanel Orientation="Horizontal" Margin="26,0,0,0">
<Label Content="Enter your friend's email" Width="222" Height="25" />
<TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" x:Name="textBoxEmail" Width="298"/>
<Button x:Name="button1" Content="Send" Command="{Binding AddCommand}" Width="77" Margin="20,0,0,0"/>
</StackPanel>
</StackPanel>
where converter is defined as below
<Window.Resources>
<ResourceDictionary>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</ResourceDictionary>
</Window.Resources>

The problem is the Visibility property in the <StackPanel> tab takes a higher precedence than anything set in a Style or Trigger, so the Trigger never gets applied. See the Dependency Property Precedence List for more details.
To fix your current solution, move the Visibliity property out of the <StackPanel> tag and into your Style, like this :
<Style x:Key="stackCollapsed" TargetType="StackPanel">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=sentButton,Path=IsPressed}" Value="true">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
<StackPanel Style="{DynamicResource stackCollapsed}">
...
</StackPanel>
That said, I would personally recommend something like a Toggle Button with the StackPanel.Visibility bound to the ToggleButton.IsChecked, like this answer suggests.

I solved set the Children to null
stackPanel.Children.Clear();
this work if you need to show / hide the panel the first time, it doesn't work if you need to do runtime

Simple as Stackpanel.Visibility = Visibility.Collapsed.

Related

How to control Visibility of ComboBox based on radio button is checked

I have a quick WPF question in regards to the visibility of my ComboBox with respects to whether or not a button is checked or not. The goal is that when the user checks the radio button: 'btnCurrent', the ComboBox: cboHistorySequence will be hidden, and when the button 'btnHistory' is checked, it will appear.
VIEW: Here we have the radio button 'btnCurrent' and 'btnHistory', as well as combobox cboHistorySequence.
<RadioButton x:Name="btnCurrent" IsChecked="{Binding IsCurrentSelected, UpdateSourceTrigger=PropertyChanged}" Content="Current" Grid.Column="0" Grid.Row="0"/>
<RadioButton x:Name="btnHistory" IsChecked="{Binding IsHistorySelected, UpdateSourceTrigger=PropertyChanged}" Content="History" Grid.Row="0" Grid.Column="1"/>
<StackPanel Orientation="Horizontal" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0" IsEnabled="{Binding IsHistorySelected, Converter={StaticResource EnabledConverter} }">
<TextBlock HorizontalAlignment="Left" Width="80">History Seq:</TextBlock>
<ComboBox x:Name="cboHistorySequence" Margin="16,0,0,0" Text="{Binding Path=HistorySequence, UpdateSourceTrigger=PropertyChanged}" Width="80" HorizontalAlignment="Left">
<ComboBoxItem>First</ComboBoxItem>
<ComboBoxItem>Last</ComboBoxItem>
</ComboBox>
</StackPanel>
What I have tried
My initial thought was to use something along the lines of this and bind it over to the view-model, but I have not been successful. What are yall's recommendations?
Visibility="{Binding IsShowComboBox, Converter={StaticResource VisibilityConverter}
Because you want to bind to the property of another element in your application you should use Binding.ElementName Property and Path, something like this:
<ComboBoxItem>Last</ComboBoxItem>
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btnCurrent, Path=IsChecked}" Value="True">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</ComboBox.Style>

How to keep Popup in Application window wpf

I have been trying to have a popup whenever I press a button.
However. Lets say that I have a lot of text on that popup and then it can go over the application window bounds.
How I can I tell the popup to keep within the application window bounds in xaml code?
It would be great with some examples in xaml code on how to tell the Popup element to keep within the application
Thanks
Xaml code:
...
<ToggleButton Grid.Row="1" Grid.Column="1" Margin="0,4"
x:Name="Somethingname"
Height="30"
Template="{StaticResource ComboBoxToggleButton}"
Content="Hello man"/>
<Popup Grid.Row="1" Grid.Column="1" x:Name="PopupMe"
Style="{StaticResource PopupStyle}"
ClipToBounds="True">
<TreeView ItemsSource="{Binding SomeObservableCollection}"
Width="{Binding ElementName=DetaljerHjemmmelToggler, Path=ActualWidth}"
ItemTemplate="{StaticResource SomeTemplate}"
cal:Message.Attach="[Event SelectedItemChanged] = [Action TreeView_SelectedItem($this, $source)]">
</TreeView>
</Popup>
...
In ResourceDictionary XAML file:
<HierarchicalDataTemplate x:Key="SomeTemplate" ItemsSource="{Binding ChildrenCollection}">
<TextBlock Text="{Binding Path=TekstBlaaah}" Style="{StaticResource Label}"/>
</HierarchicalDataTemplate>
<Style TargetType="{x:Type Popup}" x:Key="PopupStyle">
<Setter Property="IsOpen" Value="{Binding ElementName=Somethingname, Path=IsChecked}"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="PlacementTarget" Value="{Binding ElementName=Somethingname}"/>
<Setter Property="PopupAnimation" Value="Slide"/>
<Setter Property="StaysOpen" Value="False" />
<Setter Property="Placement" Value="Bottom"/>
</Style>
Check it out:
Custom popup and windows in WPF the MVVM way
Sample is also available

Conditional Context Menu Triggers

I currently have two buttons. One button is to Showappointments(), the other is ShowTask(). When either is clicked the FontWeight of that button goes to bold. Only one can be bolded at a time. I use that as the indicator to show which is being displayed.
The values are then displaye in a ListBox. I'm trying to have a condition such that when ShowTask fontweight is Bold it'll display the corresponding contextMneu for the Task, and it'll display a different set of contextmenus for Appointments.
<ListBox ItemsSource="{Binding FilteredEventsCollection}"
<Style TargetType="{x:Type ListBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=AppointmentBold}" Value="Bold">
<Setter Property="ContextMenu" Value="{StaticResource Menu1}"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel cal:Message.Attach="[Event MouseDoubleClick] = [Action Open()]">
<TextBlock Text="{Binding Date, StringFormat=g}" Foreground="Black" FontWeight="Bold" FontFamily="Segoe UI"/>
<TextBlock Text="{Binding Title}" />
<TextBlock Text="{Binding Company}" Foreground="Black"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
User Control Resources
<ContextMenu x:Key="TaskMenu">
<MenuItem>Open This Task</MenuItem>
</ContextMenu>
<ContextMenu x:Key="AppointmentMenu">
<MenuItem>Open This Appointment</MenuItem>
</ContextMenu>
This piece of code crashes right away, I'm wondering if I'm approaching correct and if I can get some guidance

WPF: ListItem does not receive focus when you press the button located on this ListItem

I have a ListBox with a DataTemplate. The template has a Button on it. Each item in the list shows the entity.
<ListBox Grid.Column="0"
x:Name="ThemesList"
ItemsSource="{Binding Themes}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedItem="{Binding SelectedTheme}"
ItemTemplate="{StaticResource ThemeListTemplate}"/>
<DataTemplate x:Key="ThemeListTemplate">
<Grid Grid.Column="1"
Grid.Row="0"
HorizontalAlignment="Right"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0"
HorizontalAlignment="Left"
Style="{StaticResource ElementButton}"
Command="{Binding Path=DataContext.ThemeEditorViewModel.OpenThemeEditorCommand, ElementName=ThemesBacklog}"
CommandParameter="{Binding Path=SelectedItem, ElementName=ThemesList}">
<TextBlock Text="Edit"/>
</Button>
<Button Grid.Row="1"
HorizontalAlignment="Left"
Style="{StaticResource ElementButton}"
Command="{Binding Path=DataContext.ThemeDeleteCommand, ElementName=ThemesBacklog}"
CommandParameter="{Binding Path=SelectedItem, ElementName=ThemesList}">
<TextBlock Text="Delete"/>
</Button>
</Grid>
</DataTemplate>
When you click on Button in the command is passed the property value SelectedItem. When you click on ListItem and then click Button - all fine. When I at once click on the Button - in the command is passed null. That is ListItem does not receive focus when you press the button located on this ListItem. How to solve this problem?
You could examine the IsKeyboardFocusWithin property on the ListBoxItems in a trigger, to find out whether a child (like your button), has focus, and set IsSelected to true if that is the case.
You do this by setting the ItemContainerStyle like this:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>

ListBox , DataTemplate and Triggers

i got a DataTemplate for a listboxitem and i want to create a triger , so when a user click an item the background will change and also the label
my code:
<Window.Resources>
<Style x:Key="RoundedItem" TargetType="ListBoxItem">
<EventSetter Event="MouseDoubleClick" Handler="listViewItem_MouseDoubleClick" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="ItemBorder" CornerRadius="10" BorderBrush="Black" BorderThickness="1" Margin="1" Background="Transparent">
<Label Name="ItemLabel" Foreground="Red" >
<ContentPresenter />
</Label>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ItemBorder" Property="Background" Value="DeepSkyBlue" />
<Setter TargetName="ItemLabel" Property="Foreground" Value="Orange" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="TitleTemplate" DataType="models:Title" >
<StackPanel>
<Image Source="{Binding ThumbFilePath}" Width="50" HorizontalAlignment="Center"/>
<Label Content="{Binding Name}" HorizontalAlignment="Center" />
<TextBlock Text="{Binding Description}" HorizontalAlignment="Center" TextWrapping="Wrap" Padding="5,5,5,5"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
What happend is that the TextBlock change his color and not the label..
anyone know why ?
Thanks.
The TextBlock inherits the Foreground definition from its parents in the visual tree. The Label, on the other hand, defines the Foreground in its default style.
Your approach is "non-WPF-like" - you shouldn't wrap the ContentPresenter in a Label control.
The right approach depends on whether you want all text in the item to change its Foreground, or just the label?
[In both cases, there's no apparent benefit to using a Label in the data template - so I'll assume that the label is changed to TextBlock.]
If the answer to the above question is that all text should be changed: in the ControlTemplate of the ListBoxItem, in the trigger for IsSelected, from the seccond setter remove TargetName="ItemLabel" so the final setter is:
<Setter Property="Foreground" Value="Orange" />
This will change the foreground of the item that will affect the foreground of both TextBlocks in the data template.
If you want to affect just one of the TextBlocks:
1. remove the setter for the foreground from the control template
2. add a trigger to your data template:
<DataTemplate>
<StackPanel>
<Image .../>
<TextBlock x:Name="Text01" ..../>
<TextBlock x:Name="Text02" ..../>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">
<Setter TargetName="Text01" Property="Foreground" Value="Orange"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
Side note: if you have to use Label control in your data template, bind its Foreground property to the Foreground of the list box item, like so:
<Label Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"....../>
If this doesn't help, it means that your list box item inherits its foreground, so use:
<Label Foreground="{Binding TextElement.Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"....../>
I want to tack on to this that I was experiencing a similar problem where I'd added a ListBox.ItemTemplate to my ListBox, and the styling then did not apply to the text anymore.
What I was doing was trying to display a list of languages (CultureInfo) for the user to select from, however I wanted the native names to display, not the English name. For some reason, not all languages have their native names capitalized in their CultureInfo, and NativeName is the only instance of their name, so I needed to apply a function to the CultureInfo.NativeName to capitalize the names myself. To accomplish this, I added the ItemTemplate with a Data Template inside, on which I applied a converter.
<ListBox IsSynchronizedWithCurrentItem="True" VerticalAlignment="Center" MinHeight="200" x:Name="cbLanguages"
ItemsSource="{Binding Path=SupportedCultures, Mode=OneWay, Source={StaticResource CultureResourcesDS}}"
FontSize="24" HorizontalAlignment="Stretch" Width="300" Margin="10"
Style="{DynamicResource ListBoxTemplate}" ItemContainerStyle="{DynamicResource ListBoxItemStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Converter={StaticResource NativeNameConverter}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
After a while of searching, I came across XAMeLi's answer here, and changed the Label I'd put in the DataTemplate to a TextBox, and the ListBoxItemStyle I'd created worked again.
Basically, Labels and TextBoxes have different traits that can be exploited, or can cause annoying issues in this case. Here's a good explanation with some examples of the differences: http://joshsmithonwpf.wordpress.com/2007/07/04/differences-between-label-and-textblock/

Categories

Resources