I need to create List View, which would be displaying like data-grid. (Data will be displaying in columns).
Also needs to perform it without GridView, definitely without column names on top. My current code:
<Rectangle Width="18" Margin="6,2,0,2"
Height="14" Fill="{DynamicResource AccentColorBrush}" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_nfc}" />
</Rectangle.OpacityMask>
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBoxItem}},
Path=IsSelected}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<TextBlock Margin="0 0 0 0"
HorizontalAlignment="Right"
Grid.Column="2">
Album Title
</TextBlock>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
That's what I have for now -
But I need to place "Album Title" from previous page like names there -
But without column names on top.
Thanks.
Related
I am new to wpf. Actully i want to change button icon(play.ico/stop.ico).
when i click the button it changes status(status is database column) value 'Online' to Offline, or Offline to Online.
It updating in database also but
I want to show when status is online buttton should show stop.ico and when I status is offline button should show play.ico.
How to achieve this? I tried with below code but its not working. please help and suggest what i am missing something.
//Xaml code
<StackPanel Margin="0 0 0 0" Grid.Column="5" Grid.Row="0" Grid.RowSpan="2">
<Button Name="Ignition_Button1" Click="Ignition_Button1_Click_1" Width="35" Height="35" Margin="16,5,16,0"
Style="{DynamicResource CircleButton}"
Command="{Binding StartStopCommand}">
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold"
Text="Start or Stop Control Center" />
</StackPanel>
</ToolTip>
</Button.ToolTip>
<StackPanel Orientation="Vertical">
<Rectangle Width="15" Height="15" StrokeThickness="0">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="{StaticResource play.ico}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Status, UpdateSourceTrigger=PropertyChanged}" Value="Online">
<Setter Property="Fill" Value="{StaticResource stop.ico }" />
</DataTrigger>
<DataTrigger Binding="{Binding Status, UpdateSourceTrigger=PropertyChanged}" Value="Offline">
<Setter Property="Fill" Value="{StaticResource play.ico}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</StackPanel>
</Button>
</StackPanel>
Several things I would suggest here.
Rather than ico which are bitmap and will have jaggies, I would recommend geometries and paths.
With a button which has two states you toggle between then a togglebutton is a good candidate.
Below I put my two geometries in resources of my togglebutton.
These are more usually put into a resource dictionary (along with the many other geometries used for iconography) and merged in app.xaml.
<ToggleButton IsChecked="True"
IsThreeState="False"
>
<ToggleButton.Resources>
<Geometry x:Key="StopGeom">
M0,0L32,0 32,32 0,32z
</Geometry>
<Geometry x:Key="PlayGeom">
M0,0L16,8 32,16 16,24 0,32 0,16z
</Geometry>
</ToggleButton.Resources>
<Path Fill="Black"
Stretch="Uniform"
Margin="4">
<Path.Style>
<Style TargetType="Path">
<Setter Property="Data" Value="{StaticResource PlayGeom}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="True">
<Setter Property="Data" Value="{StaticResource StopGeom}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</ToggleButton>
This needs more work but should give you the idea of one way to do this.
For more about layout and geometries:
https://social.technet.microsoft.com/wiki/contents/articles/32610.wpf-layout-lab.aspx
I don't know how you're styling the shape of your button, but I use this one to emphasise to wpf newbies what lookless controls means:
https://social.technet.microsoft.com/wiki/contents/articles/29866.aspx
I have a grid control in which the first column and cell shows a trash icon. But the trash icon should be visible only when its row is selected.
I have a style:
<Style TargetType="{x:Type Image}" x:Key="ImageStatusStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=RowData.IsFocused, UpdateSourceTrigger=PropertyChanged}" Value="true">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
and a data template:
<DataTemplate x:Key="TrashIconCellTemplate" >
<Button Height="15" Width="15" Command="{Binding ElementName=GroupCodeListView,Path=DataContext.MarkRowForDeletionCommand}">
<Button.Template>
<ControlTemplate>
<Image Source="../Resources/crane.png" Style="{StaticResource ImageStatusStyle}" Visibility="Hidden"/>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
A grid control:
<dxg:GridControl ItemsSource="{Binding GroupCodes, Mode=TwoWay}"
SelectedItems="{Binding
SelectedGroupCodes,Mode=TwoWay}"
SelectionMode="Row"
x:Name="Grid"
ClipboardCopyMode="ExcludeHeader"
Margin="0,0,0,0"
Height="360"
MinWidth="400"
CustomRowFilter="FilterDeleted">
and the grid cell column referencing the above:
<dxg:GridColumn FieldName="IconUnbound"
UnboundType="Object"
CellTemplate="{StaticResource TrashIconCellTemplate}"
CellStyle="{StaticResource GroupCodeColorStyle}" />
The trash image in the first cell should appear when the row is selected only.
The image remains in the default state of hidden. The data trigger is not working. What am I doing wrong here?
If you want to check whether the row is selected then you need to use RowData.IsSelected property. Also, you must set the Visibility in your Style section, not in the Image itself.
Here is example:
0. Style:
<Style TargetType="{x:Type Image}" x:Key="ImageStatusStyle">
<Setter Property="Visibility" Value="Hidden" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=RowData.IsSelected, UpdateSourceTrigger=PropertyChanged}" Value="true">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
1. Image:
<Image Source="../Resources/crane.png" Style="{StaticResource ImageStatusStyle}" />
I have a context menu which used to be a pop up menu. When I first load the program the context menu is empty as the menu items are bound to a list. However if I load the program and right click first the list is fine and then I can go to left click and the list appears. I'll show images to help my description:
Left click first
Right click first and also left click after
Can anyone help me understand why this has happened and how to fix it?
Edit - Xaml
<DataTemplate x:Key="AddNodeTemplate">
<StackPanel>
<Button x:Name="buttonAdd">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<EventTrigger RoutedEvent="Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Canvas>
<Image Source="Images/bkg_plus.png" Width="30" Height="30" Panel.ZIndex="5"/>
<Rectangle Stroke="LightGray" StrokeDashArray="2 2" Width="120" Height="30" VerticalAlignment="Center" Margin="0,0,0,0"
Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Node}}}">
<Rectangle.Fill>
<SolidColorBrush Color="LightGray"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Add Property" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="30 10 0 0" Background="Transparent"/>
</Canvas>
<Button.ToolTip>
<ToolTip>
<Label Content="Add Property"/>
</ToolTip>
</Button.ToolTip>
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding AvailableProperties}">
<ContextMenu.Resources>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Path=Name}"/>
<Setter Property="ToolTip" Value="{Binding Path=ToolTips}"/>
<Setter Property="Command" Value="{Binding Path=Command}"/>
<Setter Property="CommandParameter" Value="{Binding Path=CommandParameter}"/>
<!--<Setter Property="Icon" Value="{Binding Icon , Converter={StaticResource ImageToSourceConverter}"/>-->
</Style>
</ContextMenu.Resources>
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
New Result
Ok so this is now what happens when I do left click first
So I have tried using a pop up and have a menu inside this and this is my XAML for the result, the only problem now is I want to change the highlighted background when the mouse is hovered over the "Add Existing Property" does anyone know how to do that and also move the menu over to the right I'll post a picture up to explain
<DataTemplate x:Key="AddNodeTemplate">
<Border BorderThickness="1" Background="#F7F7F7">
<Border.BorderBrush>
<DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#F7F7F7">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,50,50"/>
<RectangleGeometry Rect="50,50,50,50"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.BorderBrush>
<StackPanel>
<ToggleButton Height="30" Width="120" Style="{StaticResource ChromelessToggleButton}" x:Name="toggleButtonAdd" IsHitTestVisible="{Binding ElementName=Popup, Path=IsOpen, Mode=OneWay, Converter={StaticResource OppositeBooleanConverter}}">
<ToggleButton.ToolTip>
<ToolTip>
<Label Content="Add Property"/>
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=toggleButtonAdd}" x:Name="Popup" StaysOpen="False" Placement="Right">
<Border BorderBrush="Black" BorderThickness="0" Background="#F7F7F7">
<StackPanel Margin="5,10,5,5" Orientation="Horizontal">
<Menu Background="#F7F7F7">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="Add Exisiting Properties">
<ListBox BorderBrush="Black" BorderThickness="0" Background="Transparent" Margin="5" Padding="4" Width="130"
ItemsSource="{Binding Path=AvailableProperties}" SelectionChanged="Selector_OnSelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#5194C7"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}" Width="12" Height="12" Margin="3" VerticalAlignment="Center"/>
<TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</MenuItem>
<MenuItem Header="Upscale Well logs">
</MenuItem>
<MenuItem Header="Upscale well_top attributes">
</MenuItem>
<MenuItem Header="Upscale point attributes">
</MenuItem>
<MenuItem Header="Calculate">
</MenuItem>
</Menu>
</StackPanel>
</Border>
</Popup>
</StackPanel>
</Border>
</DataTemplate>
Picture of menu right under the popup rather than to the right like the above pictures I want the background to be blue rather than the gray background as in the picture below
You can do this by adding a Context Menu and Style like below, I dont think its necessary to go with ListBox inside MenuItem
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding AvailableProperties}">
<ContextMenu.Resources>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Path=Name}"/>
<Setter Property="ToolTip" Value="{Binding Path=ToolTips}"/>
<Setter Property="Command" Value="{Binding Path=Command}"/>
<Setter Property="CommandParameter" Value="{Binding Path=CommandParameter}"/>
<Setter Property="Icon" Value="{Binding Icon , Converter={StaticResource ImageToSourceConverter}"/>
</Style>
</ContextMenu.Resources>
</ContextMenu>
</Button.ContextMenu>
I have search hint textbox
<TextBox
TextChanged="textboxsearch_TextChanged"
Grid.Column="4" Margin="0,0,10,10" Height="22" >
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Background" Value="{StaticResource SearchHint}" />
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Background" Value="White" />
</Trigger>
</Style.Triggers>
<Setter Property="VerticalAlignment" Value="Bottom"/>
</Style>
</TextBox.Style>
</TextBox>
here is SearchHint style
<VisualBrush x:Key="SearchHint" Stretch="None">
<VisualBrush.Visual>
<TextBox FontStyle="Italic" Background="White" Foreground="Gray" Text="Enter search text…" />
</VisualBrush.Visual>
</VisualBrush>
The search box back ground is filled by the searchhint style. The problem I have now is how can I make the width of the visual brush fill the size of the textbox. Right now it fills only a portion of the textbox.
The Text="Enter search text…" has a white background but the rest of the textbox is gray. I wanted to have a white background with gray hint text.
Give the TextBox in the VisualBrush a large padding (to the right), and give the VisualBrush a left alignment:
<VisualBrush x:Key="SearchHint" Stretch="None" AlignmentX="Left">
<VisualBrush.Visual>
<TextBox FontStyle="Italic" Background="White" Foreground="Gray" Text="Enter search text…"
Padding="0,0,1000,0" />
</VisualBrush.Visual>
</VisualBrush>
Well for what you're trying you can bind the Width of the control in the VisualBrush to your actual target's ActualWidth
something like:
<VisualBrush x:Key="SearchHint"
Stretch="None">
<VisualBrush.Visual>
<TextBox Background="White"
FontStyle="Italic"
Foreground="Gray"
Width="{Binding ElementName=tb, Path=ActualWidth}"
Height="{Binding ElementName=tb, Path=ActualHeight}"
Text="Enter search text…" />
</VisualBrush.Visual>
</VisualBrush>
...
<TextBox Grid.Column="4"
Height="22"
TextChanged="textboxsearch_TextChanged"
x:Name="tb"
Margin="0,0,10,10">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Text"
Value="">
<Setter Property="Background"
Value="{StaticResource SearchHint}" />
</Trigger>
<Trigger Property="IsKeyboardFocused"
Value="True">
<Setter Property="Background"
Value="White" />
</Trigger>
</Style.Triggers>
<Setter Property="VerticalAlignment"
Value="Bottom" />
</Style>
</TextBox.Style>
</TextBox>
However
What you're "functionally" trying to do is referred to commonly as "Watermark" / "Placeholder text" and it's much simpler to use that approach than have a complicated VisualBrush with an actual control being turned into a Brush. Just my opinion.
If you want to try the Watermark approach This Answer gives a good example for you to work with.
I have a listbox, and I have the following ItemTemplate for it:
<DataTemplate x:Key="ScenarioItemTemplate">
<Border Margin="5,0,5,0"
Background="#FF3C3B3B"
BorderBrush="#FF797878"
BorderThickness="2"
CornerRadius="5">
<DockPanel>
<DockPanel DockPanel.Dock="Top"
Margin="0,2,0,0">
<Button HorizontalAlignment="Left"
DockPanel.Dock="Left"
FontWeight="Heavy"
Foreground="White" />
<Label Content="{Binding Path=Name}"
DockPanel.Dock="Left"
FontWeight="Heavy"
Foreground="white" />
<Label HorizontalAlignment="Right"
Background="#FF3C3B3B"
Content="X"
DockPanel.Dock="Left"
FontWeight="Heavy"
Foreground="White" />
</DockPanel>
<ContentControl Name="designerContent"
Visibility="Collapsed"
MinHeight="100"
Margin="2,0,2,2"
Content="{Binding Path=DesignerInstance}"
Background="#FF999898">
</ContentControl>
</DockPanel>
</Border>
</DataTemplate>
As you can see the ContentControl has Visibility set to collapsed.
I need to define a trigger that causes the Visibility to be set to "Visible"
when the ListItem is selected, but I can't figure it out.
Any ideas?
UPDATE: Of course I could simply duplicate the DataTemplate and add triggers
to the ListBox in question to use either one or the other, but I want to prevent duplicating this code.
You can style your ContentControl such that a trigger fires when its container (the ListBoxItem) becomes selected:
<ContentControl
x:Name="designerContent"
MinHeight="100"
Margin="2,0,2,2"
Content="{Binding Path=DesignerInstance}"
Background="#FF999898">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger
Binding="{Binding
RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBoxItem}},
Path=IsSelected}"
Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
Alternatively, I think you can add the trigger to the template itself and reference the control by name. I don't know this technique well enough to type it from memory and assume it'll work, but it's something like this:
<DataTemplate x:Key="ScenarioItemTemplate">
<DataTemplate.Triggers>
<DataTrigger
Binding="{Binding
RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBoxItem}},
Path=IsSelected}"
Value="True">
<Setter
TargetName="designerContent"
Property="Visibility"
Value="Visible"/>
</DataTrigger>
</DataTemplate.Triggers>
...
</DataTemplate>
#Matt, Thank you!!!
Just had to add a trigger for IsSelected == false as well,
and now it works like a charm!
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="False">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>