I am trying to follow this guide : http://www.jarloo.com/excel-like-autofilter-in-wpf/ to add a small popup when a button in a datagrid column header is pressed. I have added a filter button and icon to the column header and set the popup's placement target as this button but the popup always displays at the bottom left of the whole window.
Any idea's why?
DataGrid Column
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Images\bios.png" Width="16" Height="16"/>
<TextBlock Text="Model" TextWrapping="Wrap" Padding="3"/>
<Button Name="btnModelFilter" Margin="3,0,0,0" Click="btnModelFilter_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Images\filter.png" Width="10" Height="10"/>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
</DataGridTemplateColumn>
Popup
<Popup Name="popModel" Placement="Bottom" PlacementTarget="{Binding ElementName=btnModelFilter}" StaysOpen="False" Width="200">
<Border Background="White" BorderBrush="Gray" BorderThickness="1,1,1,1">
<StackPanel Margin="5,5,5,15">
<StackPanel Orientation="Horizontal" Margin="0,0,0,15">
<Button Margin="0,0,0,0" Name="btnSelectAll" Click="btnSelectAll_Click">
<Button.Template>
<ControlTemplate>
<TextBlock Text="Select All" Foreground="Blue" Cursor="Hand" />
</ControlTemplate>
</Button.Template>
</Button>
<Button Margin="10,0,0,0" Name="btnUnselectAll" Click="btnUnselectAll_Click">
<Button.Template>
<ControlTemplate>
<TextBlock Text="Select None" Foreground="Blue" Cursor="Hand" />
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
<ListBox x:Name="lstModels" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Item}" Checked="ApplyFilters" Unchecked="ApplyFilters" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
</Popup>
since the Name attribute of your button is defined within a DataTemplate, the scope of the name does not go beyond that DataTemplate, hence the button is not found and PopUp is displayed at 0,0.
This scope rule is logical because imagine if you re-use the DataTemplate several times, then having same button name would raise a compiler error.
You might define your PopUp as a style with a key, and include it in your Header DataTemplate directly.
Assuming that your popup is in the same stack panel of your btnModelFilter, I think your StackPanel (parent of the btnModelFilter) should be the placement target of the popup and not the btnModelFilter.
Related
I want to make a Hexagon button for a specific button in XAML code. Does somebody know how to do that?
You could use a Datatemplate to change the appearance of the button, check this code:
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Margin="305.661,0,180.661,87.258" Background="{x:Null}" BorderBrush="{x:Null}">
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Polygon Points="25,0 50,0 75,25 75,50 50,75 25,75 0,50 0,25" Stroke="Red" StrokeThickness="3" Fill="LightBlue"></Polygon>
<TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"></TextBlock>
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
Below is my xaml for a button I would like to have a message fly out from:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
</Button>
I would like to have a small single line of text fly out when a mouse pointer moves over a button in WPF. For example, if you are using the Chrome browser a small line of text fly's out when you move your cursor over the back arrow at the top which says "click to go back". How can I have a message like that pop out when I move a mouse pointer over a WPF button? The message I want displayed for my button would be "Removes all text from the results window."
Thanks in advance.
---- UPDATE FEB 9, 2019 ------
Thanks to the comment from the.doc I updated my code to the following which now gives me the result I was looking for:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold">Removes all text from the result window</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
Below is the solution to the problem I had by using the Button.ToolTip feature which The.Doc suggested:
<Button x:Name="ClearButton" HorizontalAlignment="Left"
Width="90" Margin="0,0,0,0"
Click="ClearButton_Click">
<StackPanel Orientation="Horizontal" Margin="-15,0,0,5" >
<Image Source="{StaticResource EraseButtonImageKey}"
Margin="5,0,0,0" Height="20" Width="20" />
<TextBlock VerticalAlignment="Center"
Padding="0,0,0,0" Margin="2,0,0,0">Clear</TextBlock>
</StackPanel>
<Button.ToolTip>
<ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold">Removes all text from the result window</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
I want to achieve something like this, where there is that visible border (left of 'Market summary') vertically.
I have a grid, two columns (the left part = picture, name, email, listbox) and right part everything else). I tried to show that border by bringing the StackPanel which is found on the left column to the front using Panel.Zindex but that didn't do anything.
<StackPanel Panel.ZIndex="1" Grid.Column="0">
<materialDesign:ColorZone Height="100" Mode="PrimaryMid">
<Border Padding="8">
<StackPanel>
<Ellipse HorizontalAlignment="Left" VerticalAlignment="Top" Width="48" Height="48" RenderTransformOrigin="-0.014,0.003" Margin="0,0,104,0">
<Ellipse.Fill>
<ImageBrush ImageSource="RandomPic.jpg" />
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="UsernameX" ></TextBlock>
<TextBlock Text="EmailY" ></TextBlock>
</StackPanel>
</Border>
</materialDesign:ColorZone>
<ListBox Background="#FAFAFA" x:Name="DemoItemsListBox">
<ListBox.Items>
<TextBlock> What's going on</TextBlock>
<TextBlock>What's going on</TextBlock>
<TextBlock>What's going on</TextBlock>
<TextBlock>What's going on</TextBlock>
</ListBox.Items>
</ListBox>
</StackPanel>
<StackPanel Panel.ZIndex="0" Grid.Column="1">
<materialDesign:ColorZone Panel.ZIndex="0" Height="60" Mode="PrimaryMid" />
<!--
<dragablz:TabablzControl BorderBrush="#4CAF50" BorderThickness="0" Height="56" >
<TabItem Header=" Ordre de mission " IsSelected="True">
<TextBlock><Run Text="Hello World"/></TextBlock>
</TabItem>
<TabItem Header="Tab No. 2">
<TextBlock><Run Text="We Have Tearable Tabs!"/></TextBlock>
</TabItem>
</dragablz:TabablzControl>
-->
<ContentControl></ContentControl>
</StackPanel>
The WPF StackPanel doesn't have a border so bringing it to the front is not going to make one appear.
You would have to add your own either behind it in the same grid column or next to it by inserting a thin column and putting either a Border or Separator control in it. If putting it in the same column, you may need to adjust the StackPanel's margin so that it doesn't obscure the border.
i.e.
<Border Grid.Column="0" BorderThickness="0,0,1,0" BorderBrush="Gray"/>
<StackPanel Grid.Column="0" Margin="0,0,2,0">
<materialDesign:ColorZone Height="100" Mode="PrimaryMid">
<Border Padding="8">
<StackPanel>
<Ellipse HorizontalAlignment="Left" VerticalAlignment="Top" Width="48" Height="48" RenderTransformOrigin="-0.014,0.003" Margin="0,0,104,0">
<Ellipse.Fill>
<ImageBrush ImageSource="RandomPic.jpg" />
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="UsernameX" ></TextBlock>
<TextBlock Text="EmailY" ></TextBlock>
</StackPanel>
</Border>
</materialDesign:ColorZone>
<ListBox Background="#FAFAFA" x:Name="DemoItemsListBox">
<ListBox.Items>
<TextBlock> What's going on</TextBlock>
<TextBlock>What's going on</TextBlock>
<TextBlock>What's going on</TextBlock>
<TextBlock>What's going on</TextBlock>
</ListBox.Items>
</ListBox>
</StackPanel>
How can I draw a line inside dockpanel?
Here
<DockPanel DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<!-- Play button. -->
<Button Name="btnPlay"
Click="btnPlay_Click"
Style="{StaticResource ResourceKey=PlayButton}"></Button>
<!-- Pause button. -->
<Button Name="btnPause"
Click="btnPause_Click"
Style="{StaticResource ResourceKey=PauseButton}"></Button>
</Grid> How to draw a Red color line here with height eqals to content of dockpanel ?
</StackPanel>
</DockPanel>
You should give a name of DockPanel or StackPanel inside it and add separator:
<Separator Width="{Binding ElementName=NameOfDockPanel, Path=ActualWidth}"
Background="Black" />
If you just simply place your "Separator" into the DockPanel rather then inside one of the child item, they will Stack and the "Separator" will have the full height of the DockPanel.
<DockPanel>
<StackPanel DockPanel.Dock="Left">
<TextBlock Text="Some other controls"/>
</StackPanel>
<Border Width="5"
Background="Red"
DockPanel.Dock="Left" />
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock Text="Buttons and controls"/>
</StackPanel>
</DockPanel>
Use a rectangle and dock it where you want... And fill it as per your requirement..
example
Example for a line around your control (it could be around your dockPanel if you prefer, just put the border a level higher):
<DockPanel Name="MyDockPanel"
DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<Border BorderBrush="Blue"
BorderThickness="3">
<!-- line around control -->
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<Button Name="btnPlay"
Click="btnPlay_Click"></Button>
<Button Name="btnPause"
Click="btnPause_Click"></Button>
</Grid>
</StackPanel>
</Border>
</DockPanel>
Example for a line at the bottom:
<DockPanel Name="MyDockPanel"
DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<Button Name="btnPlay"
Click="btnPlay_Click"></Button>
<Button Name="btnPause"
Click="btnPause_Click"></Button>
</Grid>
</StackPanel>
<Line Stroke="Red"
VerticalAlignment="Bottom"
X1="0"
X2="{Binding ActualWidth, ElementName=MyDockPanel}"
StrokeThickness="3"></Line>
</DockPanel>
Separator is a good idea, or you could draw a simple rectangle in the dockpanel:
<DockPanel DockPanel.Dock="Bottom"
VerticalAlignment="Center">
<StackPanel DockPanel.Dock="Left"
VerticalAlignment="Center"
Orientation="Horizontal">
<Grid>
<!-- Play button. -->
<Button Name="btnPlay"
Click="btnPlay_Click"
Style="{StaticResource ResourceKey=PlayButton}"></Button>
<!-- Pause button. -->
<Button Name="btnPause"
Click="btnPause_Click"
Style="{StaticResource ResourceKey=PauseButton}"></Button>
</Grid>
<Rectangle Width="5"
Fill="Red"
Margin="0" />
</StackPanel>
</DockPanel>
i design page bellow code.
<ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1" x:Name="svProduct">
<StackPanel>
<ItemsControl x:Name="lstSearchResult" ItemsSource="{Binding Path=PIProductList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="480" Style="{Binding CellStyle}" Orientation="Horizontal" VerticalAlignment="Center" Height="50" >
<TextBlock Foreground="Black" FontSize="20" Width="320" FontFamily="Tahoma" Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="btnBookmark" Click="btnBookmark_Click" Tag="{Binding}" Background="Transparent">
<Button.Content>
<Image Source="/Images/bookmarks_red.png" Width="33" Height="30" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
<Button BorderThickness="0" x:Name="btnSubmit" Click="btnSubmit_Click" Background="Transparent" Tag="{Binding}" >
<Button.Content>
<Image Name="ram" Source="/Images/blue_arrow.png" Width="40" Height="40" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
i want to access for btnBookmark visuble false .
can't access btnBookmark.Visibility=Visibility.collapsed
how to do this?
please help to me...........
The best way I know to do this is to create a Visiblity property on your item ViewModel (the one that is bound to each row in your ItemsControl) and toggle that value based on the changes to each item, presumably via the toggle button in each row. I don't know of a good way to "loop and look" for these internal controls. You're much better off using the existing data binding infrastructure to manage this for you.