I am not able to move buttons inside of a dock panel to the right, I tried few solutions, and after all I put them in stack panels and tried to move them to the right, but acctualy they wont move anywhere, here is how it looks:
And here is my code:
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True" Background="Black" Opacity="0.7">
<Expander.Header>
<DockPanel Height="50">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" DockPanel.Dock="Right"> <Button DockPanel.Dock="Right" Content="Test" Margin="0,0,28,0"/></StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" DockPanel.Dock="Left"> <TextBlock FontWeight="Normal" FontFamily="Verdana" FontSize="20" Height="25" Foreground="#83D744" Text="{Binding Path=Name,StringFormat= Order Number:# {0}}" /></StackPanel>
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
edit:
This above causes width on dock panel
<DockPanel Height="50" Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}">
<Button DockPanel.Dock="Right" Content="Test" Margin="0,0,28,0"/>
<TextBlock FontWeight="Normal" FontFamily="Verdana" FontSize="20" Height="25" Foreground="#83D744" Text="{Binding Path=Name,StringFormat= Order Number:# {0}}" />
</DockPanel>
Try the following method. this works in my project
<DockPanel Height="50">
<grid DockPanel.Dock="Right">
<Button Content="Test" Margin="0,0,28,0"/>
</grid >
<grid DockPanel.Dock="Left">
<TextBlock FontWeight="Normal" FontFamily="Verdana" FontSize="20" Height="25" Foreground="#83D744" Text="{Binding Path=Name,StringFormat= Order Number:# {0}}"/>
</grid>
</DockPanel>
Apply Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}" to your DockPanel and see if this solves your problem.
Related
I am using listview in my WPF project. But the items are listed horizontally. I want it to be listed vertically and pass to the second column without a vertical scrollbar. How can I do that?
What I want to do:
My listview code:
<ListView Grid.Row="1" x:Name="listviewViews" HorizontalContentAlignment="Stretch" Visibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
SelectionMode="Single" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" SelectionChanged="listviewViews_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Height="{Binding (FrameworkElement.Height)}"
Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="190">
<Grid HorizontalAlignment="Right" Margin="0 5" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="150"/>
<ColumnDefinition Width="35"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TextBlock FontFamily="{StaticResource FontAwesome}" Margin="5 0" VerticalAlignment="Center">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsDisabled}" Value="True">
<Setter Property="Text" Value="" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock x:Name="txt" Text="{Binding ViewName}" VerticalAlignment="Center" Grid.Column="0"/>
</StackPanel>
<Button x:Name="btnViewDelete" ToolTip="{DynamicResource Delete}" Click="btnViewDelete_Click" Grid.Column="1">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Control this behavior via WrapPanel's Orientation property
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" ... />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
I edited the code as you said, but still one line remains below and vertical scrolling occurs:
Screenshot
Listview code:
<ListView Grid.Row="1" x:Name="listviewPools" HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"
Height="{Binding (FrameworkElement.ActualHeight)}"
Width="{Binding (FrameworkElement.Width),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Right" Margin="0 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txt" Text="{Binding PoolName}" VerticalAlignment="Center" Grid.Column="0"/>
<Button x:Name="btnFilters" ToolTip="{DynamicResource Filters}" Click="btnFilters_Click" Grid.Column="1">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
<Button x:Name="btnPoolEdit" ToolTip="{DynamicResource Edit}" Click="btnPoolEdit_Click" Grid.Column="2">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
<Button x:Name="btnPoolDelete" ToolTip="{DynamicResource Delete}" Click="btnPoolDelete_Click" Grid.Column="3">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
We have a WPF windows application, We need to change the Modal dialog title bar color, Below is the code snippet and also the screenshot of current dialog box. We are using WPF DevExpress.Xpf third party dlls.
We have tried background color change option also at various places but nothing works and title bar colro wont get changed.
<coreClient:BaseWindow x:Name="ModalDialogWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ShowInTaskbar="False"
Height="10" Width="10"
Activated="ModalDialogWindowActivated"
Icon="/Images/app_icon_small.png"
Title="{Binding Path=DialogTitle}">
<coreClient:BaseWindow.Resources>
<converter:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
<converter:EmptyStringToVisibilityConverter x:Key="EmptyStringToVisibilityConverter" />
<converter:ModalDialogActionCommandArgsConverter x:Key="ModalDialogActionCommandArgsConverter" />
</coreClient:BaseWindow.Resources>
<DockPanel LastChildFill="True">
<Border Height="35" DockPanel.Dock="Bottom" Margin="0" Style="{StaticResource BdrModalDialogActionPanel}">
<DockPanel LastChildFill="True">
<StackPanel x:Name="actionButtonPanel"
Orientation="Horizontal"
DockPanel.Dock="Right"
HorizontalAlignment="Right"
VerticalAlignment="Center">
<ItemsControl Name="actionButtons"
ItemsSource="{Binding ActionButtons}"
HorizontalAlignment="Right"
Focusable="False"
VerticalAlignment="Center">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="additionalActionButton"
IsDefault="{Binding IsButtonDefault}"
IsCancel="{Binding IsButtonCancel}"
IsEnabled="{Binding IsButtonEnabled}"
Content="{Binding Path=Content}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="0,0,5,0"
ToolTipService.ShowOnDisabled="True"
Command="{Binding Path=ActionCommand}" Height="29">
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource ModalDialogActionCommandArgsConverter}">
<MultiBinding.Bindings>
<Binding ElementName="ModalDialogWindow" />
<Binding />
</MultiBinding.Bindings>
</MultiBinding>
</Button.CommandParameter>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="Content" Value="Search">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="29" />
<Setter Property="Width" Value="76" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#0096d6" x:Name="RootElement">
<TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.ToolTip>
<ToolTip Visibility="{Binding TooltipText, Converter={StaticResource EmptyStringToVisibilityConverter}, ConverterParameter='HIDDEN'}"
Content="{Binding TooltipText}" />
</Button.ToolTip>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<StackPanel Orientation="Horizontal"
DockPanel.Dock="Left"
Visibility="{Binding IsActionInProgress, Converter={StaticResource BoolToVisibilityConverter}}">
<common:SpinnerControl x:Name="SpinnerControl" VerticalAlignment="Center" VerticalContentAlignment="Center" />
<TextBlock Text="{Binding ActionStatusMessage}"
Margin="5,0,0,0"
VerticalAlignment="Center"/>
</StackPanel>
</DockPanel>
</Border>
<ContentControl x:Name="MainControl"
IsTabStop="False"
Focusable="False" />
</DockPanel>
</coreClient:BaseWindow>
I have six stack panel elements that are toggled all by a seperate toggle button which is what I need. However, when the user opens up one of the stack panels I would like to close all of the other ones and just show the one they have clicked on.
<Grid HorizontalAlignment="Left" Height="504" Margin="-1,1,0,0" VerticalAlignment="Top" Width="760">
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="boolConverter" />
</Grid.Resources>
<StackPanel HorizontalAlignment="Left" Height="505" VerticalAlignment="Top" Width="124" Background="#FF45B8F9" Margin="1,-1,0,0"/>
<StackPanel HorizontalAlignment="Left" Height="505" VerticalAlignment="Top" Width="124" Background="#FFF95545" Margin="636,0,0,-1" Visibility="{Binding ElementName=button, Path=IsChecked, Converter={StaticResource boolConverter}}"/>
<StackPanel HorizontalAlignment="Left" Height="505" VerticalAlignment="Top" Width="124" Background="#FFF9F945" Margin="507,-1,0,0" Visibility="{Binding ElementName=button_Copy, Path=IsChecked, Converter={StaticResource boolConverter}}"/>
<StackPanel HorizontalAlignment="Left" Height="505" VerticalAlignment="Top" Width="124" Background="#FF76F945" Margin="378,-1,0,0" Visibility="{Binding ElementName=button1, Path=IsChecked, Converter={StaticResource boolConverter}}"/>
<ToggleButton x:Name="button" Content="Green" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="105" Click="button_Click"/>
<ToggleButton x:Name="button_Copy" Content="Yellow" HorizontalAlignment="Left" Margin="10,55,0,0" VerticalAlignment="Top" Width="105" Click="button_Click"/>
<ToggleButton x:Name="button1" Content="Red" HorizontalAlignment="Left" Margin="10,114,0,0" VerticalAlignment="Top" Width="105"/>
</Grid>
Make a RadioButton custom template to display like an Expander:
<Style TargetType="{x:Type RadioButton}">
<Setter Property="GroupName" Value="MyToggleButtonGroupName"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Expander IsExpanded="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}">
<ContentPresenter/>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<RadioButton>
<StackPanel>...</StackPanel>
</RadioButton>
<RadioButton>
<StackPanel>...</StackPanel>
</RadioButton>
<RadioButton>
<StackPanel>...</StackPanel>
</RadioButton>
I have
<ListView ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1" Grid.Column="0" Margin="2" Name="CoursesListView" ItemsSource="{Binding CourseTags}">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border Margin="2" BorderThickness="1" BorderBrush="Red" Background="AntiqueWhite" CornerRadius="2" Cursor="Hand">
<WrapPanel ToolTip="{Binding Description}" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Text=" (" />
<TextBlock Text="{Binding NumberOfCourses}" TextDecorations="Underline" Foreground="Blue" />
<TextBlock Text=")" />
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding DataContext.ProductTagSelectedCommand, ElementName=LayoutRoot}"
CommandParameter="{Binding Name}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</WrapPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The items are stretched well and have the same width regardless how much text they have. Hand cursor displays correctly as well (wherever I point) The problem is that EventTrigger fires command only when I click on the text blocks. How to make it work throughout all the item?
It's very simple. Just place your EventTrigger inside the Border, not the WrapPanel:
<Border Margin="2" BorderThickness="1" BorderBrush="Red" Background="AntiqueWhite" CornerRadius="2" Cursor="Hand">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding DataContext.ProductTagSelectedCommand, ElementName=LayoutRoot}" CommandParameter="{Binding Name}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<WrapPanel ToolTip="{Binding Description}" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Text=" (" />
<TextBlock Text="{Binding NumberOfCourses}" TextDecorations="Underline" Foreground="Blue" />
<TextBlock Text=")" />
</WrapPanel>
</Border>
I have a 2 column grid that I want to wrap with a <Button> now when I do that it totally screws the layout of the grid, how do I disable the style of the button so that the grid is clickable via the button but it looks the same.
When I start I have the following xaml
<Grid>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180*" />
<ColumnDefinition Width="296*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding image}" Margin="10,10,10,10"/>
<StackPanel Grid.Column="1">
<TextBlock Grid.Column="1" Text="{Binding hoursAgo}" FontSize="16" FontWeight="Light" FontStyle="Italic"></TextBlock>
<TextBlock FontSize="26.667" TextDecorations="Underline" Text="{Binding title}" TextWrapping="Wrap" Height="40" Width="295" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="#FF3253B8" Canvas.Top="22" Grid.Column="1" >News Title Goes here</TextBlock>
<TextBlock FontSize="21.333" Text="{Binding description}" TextWrapping="Wrap" d:LayoutOverrides="VerticalAlignment" Grid.Column="1" />
</StackPanel>
</Grid>
</Grid>
If I use expression blend to convert to a button it messes the source a bit, which is not what I want
<UserControl.Resources>
<Style x:Key="SelectedEntry" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180*" />
<ColumnDefinition Width="296*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding image}" Margin="10,10,10,10"/>
<StackPanel Grid.Column="1">
<TextBlock FontSize="26.667" TextDecorations="Underline" Text="{Binding title}" TextWrapping="Wrap" Height="40" Width="295" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="#FF3253B8" Canvas.Top="22" Grid.Column="1" ><Run Text="News Title Goes here"/></TextBlock>
<TextBlock FontSize="21.333" Text="{Binding description}" TextWrapping="Wrap" d:LayoutOverrides="VerticalAlignment" Grid.Column="1" />
</StackPanel>
</Grid>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontStyle" Value="Italic"/>
</Style>
</UserControl.Resources>
<Button Content="{Binding hoursAgo}" Style="{StaticResource SelectedEntry}"/>
now the description is not showing in the grid.
Open Blend, right click the Grid that you want to turn into a Button and select Make Into Control.
Then in the popup window, select which control you want it to turn to, in your case, a Button. :) That's it.