I want to create a button having image and label as content in the bottom and notification image on the Upper right corner as in the WhatsApp whenever there is notification.
I can work with Notification logic but can't able to display the image properly as shown in the figure.
I tried with canvas and grid but not able to do that.Any help will be appreciated.I also tried using dock panel and stack panel but was unable to achieve the same.
<Button Name="JobViewer" Tag="JobsIcon" Style="{DynamicResource ButtonAppStyle}" Margin="5" Click="UpdateAction" ToolTip="{Binding RelativeSource={RelativeSource Self }, Path=Name}" >
<Button.Content>
<DockPanel>
<Image DockPanel.ZIndex="2" Source="{StaticResource ContainerZoomWarningLightIcon}" DockPanel.Dock="Top" MaxHeight="40" MaxWidth="40" HorizontalAlignment="Right" ></Image>
<Label Content="JobViewer" DockPanel.Dock="Bottom"></Label>
<Image DockPanel.ZIndex="1" Source="{StaticResource JobsIcon}" ></Image>
</DockPanel>
</Button.Content>
</Button>
the image i get
the image i want
You could specify the <Button> content to give yourself the layout you want.
<Button Width="70" Height="70" Background="Transparent">
<Button.Content>
<Canvas Background="Black">
<Border CornerRadius="8" Height="50" Width="50" Canvas.Left="-25" Canvas.Top="-25"
BorderThickness="0" BorderBrush="Black" Background="#FF47B137">
<Border.Effect>
<DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
</Border.Effect>
</Border>
<Border CornerRadius="20" Width="20" Height="20" Canvas.Left="10" Canvas.Top="-30"
BorderBrush="White" BorderThickness="2" Background="#FFE40814">
<Border.Effect>
<DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
</Border.Effect>
</Border>
</Canvas>
</Button.Content>
</Button>
Related
While I was trying to experiment with User Controls, I've stumbled upon this weird issue, which for some reason when I add the User Control to a Window, It just displays the border that I made, while not showing any content inside of it (whether I placed it within a border or a grid)
This is how it looks in the designer:
And this is how it looks in a Window (in designer and on runtime):
As seen, It's not displaying the button nor the label.
User Control:
<Grid Background="{x:Null}">
<Border BorderBrush="#FAF9F9" CornerRadius="20" Background="#FAF9F9">
<Border.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="2" Direction="270"/>
</Border.Effect>
<Grid Background="{x:Null}">
<Label Content="Label" HorizontalAlignment="Left" VerticalContentAlignment="Center" Margin="10,280,0,0" VerticalAlignment="Top" Height="47" Width="428" FontSize="25"/>
<Button Content="+" HorizontalAlignment="Left" Margin="443,280,0,0" VerticalAlignment="Top" Width="47" Height="47" HorizontalContentAlignment="Center" Foreground="White" FontSize="40" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" BorderBrush="{x:Null}">
<Button.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="2" Direction="270"/>
</Button.Effect>
<Button.Template >
<ControlTemplate TargetType="Button" >
<Grid >
<Path Stretch="Uniform" UseLayoutRounding="False" Fill="#FFEA1E27">
<Path.Data>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
</Path.Data>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Border>
</Grid>
Looks like actual size of your control is smaller then design size. Thus, the label and the button are outside of Control's visible part.
Try positioning of Label and Button relative to bottom right and left corners instead of top-left.
<Label Content="Label" HorizontalAlignment="Left" Margin="10" VerticalContentAlignment="Center" VerticalAlignment="Bottom" Height="47" Width="428" FontSize="25"/>
<Button Content="+" HorizontalAlignment="Right" Margin="10" VerticalAlignment="Bottom" Width="47" Height="47" HorizontalContentAlignment="Center" Foreground="White" FontSize="40" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" BorderBrush="{x:Null}">
I'm getting such error
The name 'ScoreBtn' does not exist in the current context
and
The name 'LvlBttn' does not exist in the current context
on c# side but I can get text of Label x:Name="Lines". Where is mistake and how can I fix it?
Thanks for any help,
</Window.Resources>
<DockPanel LastChildFill="false">
<Button DockPanel.Dock="Right" Visibility="Hidden" Width="300">Right</Button>
<StackPanel DockPanel.Dock="Right" Width="311" >
<Button x:Name="btnPlay" Content="Play" Click="btnPlay_Click" Width="50" Height="25" Margin="5"/>
<Button x:Name="Score" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label x:Name="ScoreBtn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8" Content="Score"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="level" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label Content="Level 1" x:Name="LvlBttn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Label Visibility="Hidden" Content="Lines " Height="56" x:Name="Lines" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
This will get you the Label for the button named Score. "ScoreBtn"is the name of the label element. It's not as complicated as I thought it would be.
var label = (Label)Score.Template.FindName("ScoreBtn", Score);
You really ought to listen to Peter Duniho, write a viewmodel, and bind the label's Content property to a viewmodel property, but if you don't already have a viewmodel, you may not want to rewrite your entire project. Since you don't have a single Binding in your XAML, I imagine that might be the case.
So I have a circular button I have created in wpf like so:
<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate>
<Grid>
<Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
But the button it displays is:
Why has the red X not appeared in the center of my button? and is it possible to change my xaml such that the red X will appear.
(ps. the grey background is because of my button style in my resources)
It's because there's nothing in your Template to display that Content. For that you need to use ContentPresenter
<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
you'll also need to add TargetType="{x:Type Button}" to ControlTemplate
I build an image gallery in WPF, main window is simply a grid of images, i want to draw a zoom icon overlay at corner of image, and when user click on this icon, this icon will capture click event instead of image. I'm quite new to WPF, so please show me a good approach for this.
Here is xaml file
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Image Gallery" Height="350" Width="525" WindowState="Maximized">
<Window.Resources>
<ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
<UniformGrid Columns="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></UniformGrid>
</ItemsPanelTemplate>
<DataTemplate x:Key="ListImageDataTemplate">
<Grid HorizontalAlignment="Left" Width="230" Height="230">
<Border Padding="5" Margin="10" BorderBrush="Orange">
<!--Bind Image Path in Image Control-->
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center">
<!--View Large Image on Image Control Tooltip-->
<Image.ToolTip>
<StackPanel Background="Black">
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200"></Image>
<TextBlock Text="{Binding ImageName}" Foreground="White" Background="Black" Height="20" FontWeight="SemiBold" Margin="15,0,15,0"></TextBlock>
</StackPanel>
</Image.ToolTip>
</Image>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox x:Name="lbImageGallery" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}" ItemsPanel="{DynamicResource ImageGalleryItemsPanelTemplate}" ItemTemplate="{StaticResource ListImageDataTemplate}">
<ListBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FF1E2A2F" Offset="1"/>
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
</Grid>
</Window>
OK, download an icon, and add it to your project (Images\overlay.jpg). The DataTemplate now looks like this
<DataTemplate x:Key="ListImageDataTemplate">
<Grid HorizontalAlignment="Left" Width="230" Height="230">
<Border Padding="5" Margin="10" BorderBrush="Orange">
<Grid>
<!--Bind Image Path in Image Control-->
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" />
<!--Show the overlay at the Bottom Right corner-->
<StackPanel Background="Black" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Image Source="Images/overlay.jpg" Stretch="Fill" Height="40" Width="40"></Image>
<!--<TextBlock Text="{Binding ImageName}" Foreground="White" Background="Black" Height="20" FontWeight="SemiBold" />-->
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
I have this xaml code of my metro app.
<Grid Width="531" Height="531">
<Grid.Background>
<ImageBrush ImageSource="{Binding image1}" Stretch="UniformToFill" />
</Grid.Background>
<StackPanel Background="#0072B0" Opacity="0.7" VerticalAlignment="Bottom">
<Border BorderThickness="0,0,0,1" BorderBrush="White">
<TextBlock Text="{Binding name}" VerticalAlignment="Bottom" Opacity="1" Style="{StaticResource BigTopDealItemTitle}"/>
</Border>
</StackPanel>
</Grid>
I wanna make a blur panel and clear text on it. But look like the text in TextBlock blur too, even I set Opacity of it with 1.
To make a background blurry without making the textbox blurry do something like this:
<Grid Width="531" Height="531">
<Grid.Background>
<ImageBrush ImageSource="{Binding image1}" Stretch="UniformToFill" />
</Grid.Background>
<StackPanel Background="#0072B0" Opacity="0.7" VerticalAlignment="Bottom">
<Grid>
<Border BorderThickness="0,0,0,1" BorderBrush="White"/>
<TextBlock Text="{Binding name}" VerticalAlignment="Bottom" Style="{StaticResource BigTopDealItemTitle}"/>
</Grid>
</StackPanel>
</Grid>
This will put the TextBlock on top of the background (i.e. the Border) without it being affected by the properties of the Border.