Using Grid to display pictures around edge of screen.
<Image Source="...." Grid.Row="0" Grid.Column="0">
<Image.Tooltip>
<TextBlock>Some narrative..</TextBlock>
<TextBox Name="ToolTipText" Grid.Row="1" Grid.Column="1" />
On MouseOver I want the tooltip to appear in TextBox, but it aways appears centered over the image.
<Style TargetType="ToolTip">
<Setter Property="PlacementTarget"
Value="{Binding ElementName=ToolTipText, Path=Text} />
<Setter Property="Placement" Value="Center" />
Try this
<Grid Name="mainGrid">
<Image Source="...." Grid.Row="0" Grid.Column="0" ToolTipService.PlacementTarget="{Binding ElementName=mainGrid}">
<Image.ToolTip>
<ToolTip Placement="Center">
<TextBlock>Some narrative..</TextBlock>
</ToolTip>
</Image.ToolTip>
</Image>
</Grid>
This
ToolTipService.PlacementTarget="{Binding ElementName=mainGrid}"
Can be replaced by
ToolTipService.PlacementTarget="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}}"
Related
Quick question for who known WPF:
How to add a badge in a Mahapps HamburgerMenuItem?
I use this template:
<DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type Controls:HamburgerMenuIconItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ContentControl Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{Binding Icon}" />
</Rectangle.Fill>
</Rectangle>
</ContentControl>
<TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Foreground="White" Text="{Binding Label}" />
</Grid>
</DataTemplate>
And here is my Hamburger Items:
<Controls:HamburgerMenuItemCollection>
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_home_variant}" Label="Home">
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="HomeView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_people_status}" Label="Private" >
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="PrivateView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_page_onenote}" Label="Notes">
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="NotesView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_cog}" Label="Settings">
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="SettingsView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
</Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.ItemsSource>
Here what I am looking for:
HamburgerMenu Badge
Regards,
As I found here
You can wrap them arround your Icon.
<Controls:Badged Badge="{Binding Path=BadgeValue}" BadgePlacementMode="BottomRight">
<!-- Control to wrap goes here -->
<Button>
<iconPacks:PackIconFontAwesome Kind="CommentOutline"/>
</Button>
</Controls:Badged>
In your example it would be:
<Controls:Badged Badge="{Binding Path=BadgeValue}">
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_home_variant}" Label="Home">
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="HomeView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
</Controls:Badged>
it is possible. But it will get cut and does not look very good IMO
Example closed:
Example opened:
How to get it?:
Just wrap your Icon in the DataTemplate with a Badge:
<DataTemplate x:Key="HamburgerMenuItem" DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
<DockPanel Height="48" LastChildFill="True">
<Controls:Badged x:Name="IconPart"
Width="48"
Badge="?"
BadgeBackground="Red"
DockPanel.Dock="Left">
<Image Margin="12"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Glyph}"
Stretch="UniformToFill" />
</Controls:Badged>
<TextBlock x:Name="TextPart"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Label}" />
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:HamburgerMenu}}, Path=PanePlacement}" Value="Right">
<Setter TargetName="IconPart" Property="DockPanel.Dock" Value="Right" />
<Setter TargetName="TextPart" Property="Margin" Value="8,0,0,0" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
You can modify this to your needs.
UPDATE: Here are additional information from the maintainer of MahApps: https://github.com/MahApps/MahApps.Metro/issues/3800#issuecomment-631103384
I hope this helps and happy coding
Tim
Here is my control template for the button style.
<StackPanel Orientation="Horizontal">
<Image x:Name="EmailImage" Source="../Images/btn__icon_savedisk.png" Height="17" Width="17" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" />
<TextBlock x:Name="EmailImageTxt" Margin="20,0,20,0" Foreground="White" Text="{x:Static res:Localize.SAVE}" Background="{x:Null}" />
</StackPanel>
My problem is when I get mouse pointer over the area with the space between image and text button(image and text) is not selecting. I need to have mouse focus on all over the buttons.
Thank you for your help.
Set Background="Transparent" to stackpanel and it works as expected.
An control with no background is usually called as non-hittable in XAML terms. So it is must to set a background to make the object respond to hits.
<Button VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate>
<StackPanel x:Name="stackpanel" Orientation="Horizontal">
<Image x:Name="EmailImage" Source="Black.jpg" Height="17" Width="17" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" />
<TextBlock x:Name="EmailImageTxt" Margin="20,0,20,0" Foreground="Black" Text="gdfgdg}" Background="{x:Null}" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" TargetName="stackpanel"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
In my app, when i am clicking on a button btn_setting this convas visibility is visible so it is showing like a popup having multiselect list with OK and Cancel buttons but the problem i am facing is that i want to add items in multiselectlist dynamically with checkbox border colour blue and foreground color to be black and the most important after every item i want a horizontal blue-line as a separator between two items.
I put foreground ="Black" for MultiSelectList but itis showing the white colour for the items.
<Canvas x:Name="Setting_popup" Width="485" Height="770" Visibility="Collapsed">
<Border Margin="10" >
<StackPanel Background="White">
<toolkit:MultiselectList x:Name="Setting_list" Background="Blue" Width="456" Height="700" FontWeight="Bold" Foreground="Black">
<CheckBox Content="Celsius" />
<CheckBox Content="Fahrenheit"/>
<CheckBox Content="Kelvin"/>
<CheckBox Content="Rankine"/>
</toolkit:MultiselectList>
<StackPanel Orientation="Horizontal">
<Button x:Name="btn_OK" Content="Ok" Width="223" HorizontalAlignment="Left" Foreground="White" Background="#FF3498DB" />
<Button x:Name="btn_Cancel" Content="Cancel" Width="223" HorizontalAlignment="Right" Foreground="White" Background="#FF3498DB" Click="Button_Click_1" />
</StackPanel>
</StackPanel>
</Border>
</Canvas>
You can change the check boxes style, for example:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="CheckBoxStyle1" TargetType="CheckBox">
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="Foreground" Value="Black"/>
</Style>
</phone:PhoneApplicationPage.Resources>
And then set the style to each check box:
<toolkit:MultiselectList x:Name="Setting_list" Width="456" Height="400" >
<CheckBox Content="Celsius" Style="{StaticResource CheckBoxStyle1}" />
<CheckBox Content="Fahrenheit" Style="{StaticResource CheckBoxStyle1}"/>
<CheckBox Content="Kelvin" Style="{StaticResource CheckBoxStyle1}"/>
<CheckBox Content="Rankine" Style="{StaticResource CheckBoxStyle1}"/>
</toolkit:MultiselectList>
I was using XmlDataProvider to get pictures from a folder, then display them in a list box, but something is wrong that list box appears but without those pictures. Pictures are in a folder called Resources in the project directory.
here are the codes, xmldata part:
<!-- List content -->
<XmlDataProvider x:Key="tri" XPath="Root">
<x:XData>
<Root xmlns="">
<Entry Name="Cone" Image="\Resources\cone.jpg" />
<Entry Name="Cube" Image="\Resources\cube.jpg" />
<Entry Name="Cylinder" Image="\Resources\cylinder.jpg" />
<Entry Name="Icosahedron" Image="\Resources\icosahedron.jpg" />
<Entry Name="Octahedron" Image="\Resources\octahedron.jpg" />
<Entry Name="Sphere" Image="\Resources\sphere.jpg" />
<Entry Name="Torus" Image="\Resources\torus.jpg" />
<Entry Name="YinYang" Image="\Resources\yinyang.jpg" />
</Root>
</x:XData>
</XmlDataProvider>
then the listbox part:
<s:SurfaceListBox x:Name="triList" Grid.Row="1"
s:SurfaceDragDrop.DragCompleted="OntriListDragCompleted"
s:SurfaceDragDrop.DragCanceled="OntriListDragCanceled"
PreviewMouseLeftButtonDown="OntriListPreviewMouseLeftButtonDown"
PreviewMouseMove="OntriListPreviewMouseMove"
PreviewMouseLeftButtonUp="OntriListPreviewMouseLeftButtonUp"
ItemsSource="{Binding Source={StaticResource tri}, XPath=Entry}"
Style="{StaticResource triListStyle}"
PreviewTouchDown="OntriListPreviewTouchDown"
PreviewTouchMove="OntriListPreviewTouchMove"
PreviewTouchUp="OntriListPreviewTouchUp" Height="234" VerticalAlignment="Top" Visibility="Visible" ItemsPanel="{Binding}" AllowDrop="False" />
the list style:
<Style x:Key="triListStyle" TargetType="{x:Type s:SurfaceListBox }">
<Setter Property="Background" Value="{DynamicResource {x:Static s:SurfaceColors.ListBoxItemBackgroundBrushKey}}" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="Height" Value="234" />
<Setter Property="ItemTemplateSelector">
<Setter.Value>
<sc:triListTemplateSelector>
<sc:triListTemplateSelector.NormalItemTemplate>
<DataTemplate >
<StackPanel RenderTransformOrigin="0.5, 0.5"
Margin="7,0,0,0"
MinWidth="171" MaxWidth="171"
MinHeight="235" MaxHeight="235">
<Image Margin="14,21,21,11" Source="{Binding XPath=#Image}"
Height="149" Width="101" />
<TextBlock Text="{Binding XPath=#Name}"
MaxWidth="116"
FontSize="12"
Margin="21,0,21,21"
FontFamily="Segoe360"
TextAlignment="Center"
TextWrapping="Wrap"
Foreground="{DynamicResource {x:Static s:SurfaceColors.ListBoxItemForegroundBrushKey}}"
HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</sc:triListTemplateSelector.NormalItemTemplate>
<sc:triListTemplateSelector.StartingItemTemplate>
<DataTemplate>
<Grid Margin="17, 0, 0, -14">
<StackPanel RenderTransformOrigin="0.5, 0.5"
Margin="7,0,0,0"
MinWidth="171" MaxWidth="171"
MinHeight="235" MaxHeight="235">
<Image Margin="14,21,21,11"
Source="{Binding XPath=#Image}"
Height="149"
Width="101" />
<TextBlock Text="{Binding XPath=#Name}"
MaxWidth="116"
FontSize="12"
Margin="21,0,21,21"
FontFamily="Segoe360"
TextAlignment="Center"
TextWrapping="Wrap"
Foreground="{DynamicResource {x:Static s:SurfaceColors.ListBoxItemForegroundBrushKey}}"
HorizontalAlignment="Center" />
</StackPanel>
<Rectangle Fill="{DynamicResource {x:Static s:SurfaceColors.SurfaceWindowBackgroundBrushKey}}"
Width="17" HorizontalAlignment="Left" Margin="-26,-2.5,0,3" />
</Grid>
</DataTemplate>
</sc:triListTemplateSelector.StartingItemTemplate>
</sc:triListTemplateSelector>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<s:SurfaceScrollViewer Background="{TemplateBinding Background}"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Hidden"
CanContentScroll="True">
<!--<sc:LoopingPanel IsItemsHost="True" /> -->
</s:SurfaceScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
can you help me to find out the problem?
Don't know why you need the XmlDataProvider stuff for showing some images in a ListBox, but what you need is a DataTemplate with an Image control that actually visualizes each image:
<DataTemplate x:Key="imageTemplate">
<Image Source="{Binding XPath=#Image}"/>
</DataTemplate>
You would use that in your ListBox by setting the ItemTemplate property:
<s:SurfaceListBox ... ItemTemplate="{StaticResource imageTemplate}"/>
Also make sure that the Build Action is set to Resource for the image files in your Visual Studio project.
I'm having a problem styling my ListBox selection background.
I used ListView originally, it was less problematic with styling but moving this to Silverlight app, I found out that it doesn't have ListView so I just used ListBox.
I want my app to be easily ported in Silverlight and also in Windows Phone so I used ListBox and now am having a trouble with the style.
My Metro app has Dark theme and I have custom ListBoxItem but am not sure why when I clicked on it, it looks like this
originally when using ListView, it looks like this
adding background color in my custom ItemsTemplate make it look this
How do I get rid of that White background and also restyle the item when hovered because it looks like this
this my XAML for listbox so far
<ListBox Grid.Row="3" Name="lvSubmeters" VerticalAlignment="Top" HorizontalAlignment="Stretch" SelectedItem="{Binding Path=SelectedListViewItem, Mode=TwoWay}" SelectedIndex="{Binding Path=SelectedListViewIndex, Mode=TwoWay}" ItemTemplate="{StaticResource SubmeterItems}" ItemsSource="{Binding Path=Store.AllItems}" Background="{x:Null}" Foreground="White">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="0" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
and also if you want my custom ItemsTemplate
<DataTemplate x:Name="SubmeterItems">
<Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="5,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="166"/>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding MeterID}" FontSize="24" FontWeight="Bold" Foreground="#FF429AA3" />
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding Fullname}" FontSize="16" />
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Height="95">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text=" " FontSize="24" FontWeight="Bold" Foreground="#FF429AA3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="29*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="Last Reading:" FontSize="14" Margin="0,0,5,5" />
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="New Reading:" FontSize="14" Margin="0,0,5,5" />
<TextBlock Grid.Column="0" VerticalAlignment="Top" Text="KW/H Used:" FontSize="14" Margin="0,0,5,5" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding LastReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding NewReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
<TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding KwHUsed}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Black">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding KwhUsedAmount}" FontSize="20" FontWeight="Bold" Foreground="Red" TextAlignment="Right" Margin="0,0,5,0" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="+" FontSize="20" Foreground="#99FF0000" TextAlignment="Right" Margin="0,0,5,0"/>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding AdditionalCharges}" FontSize="20" Foreground="#99FF0000" TextAlignment="Right" Margin="0,0,5,0"/>
</StackPanel>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding TotalAmount}" FontSize="34" FontWeight="Bold" Foreground="Green" TextAlignment="Right" Margin="0,0,5,0" />
</StackPanel>
</Grid>
</DataTemplate>
I tried taking this to Blend 4 but I can't find the way to do it.
It looks to me like your screenshots from above don't quite match the XAML that you've provided, however I think I can answer your questions.
For the white border around each item - From the way that the border changes to Purple when the item is selected, you can tell that it is part of the ItemContainer (because that is what gets selected). The ItemContainer will contain the Content of each ListBoxItem. The Content is rendered using the DataTemple (or ItemTemplate property). In your DataTemplate, you have a margin of 5 around the topmost grid, meaning that when the Content is rendered using that DataTemplate, there will be a margin around the outside of the content. That seems to be what you're getting with your white border around each item, so I'm pretty sure that's what is going on. Get rid of the margin in the top most grid of the DataTemplate, and the white border will be gone. If this isn't correct, please provide more complete XAML example (including the parent XAML element of the Listbox) because the xaml above, on its own, does not yield a white border when the Window background is Black.
Changing the colors/style of the ListBoxItem is pretty easy, and there are several ways to do it. The easiest way (in my opinion) is to add a trigger to the ItemContainerStyle that adjusts the background color on MouseOver. Here is a simple example, extending your existing ItemContainerStyle (triggers can be much more advanced, if you wish):
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
Hope that helps.