I'm struggling with a problem while trying create a collection of buttons.
I have a button made in wpf and when I deploy to my application I want to be able to assign the image at instantiation.
Just now the button textblock is bound to {Binding Content} and I'm able to add the top buttons and an Image placeholder.
What I cant figure out is how to assign the click event handlers to the top two buttons, also when I click the top buttons.
The main button click event fires, I've tried changing the Canvas.ZIndex but that's not working.
I've included a very crude image of what I'm trying to achieve, I could create all the buttons separately but that's not the point, I want one template which will allow me to use over different things.
Is it just a control template I need or do I need a completely new usercontrol developed.
<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" BorderThickness="2" CornerRadius="10" Width="200" Height="130" Background="#FF5581A6" RenderTransformOrigin="0.5,0.5">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,5,5,0">
<Button Canvas.ZIndex="10">
<StackPanel Orientation="Horizontal">
<Rectangle Width="15" Height="15">
<Rectangle.Fill>
<ImageBrush ImageSource="Resources/Icons/appbar.information.circle.png"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</Button>
<Button x:Name="ClosePlugin" Canvas.ZIndex="10" Margin="5,0,0,0">
<StackPanel Orientation="Horizontal">
<Rectangle Width="15" Height="15">
<Rectangle.Fill>
<ImageBrush ImageSource="Resources/Icons/appbar.close.png"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</Button>
</StackPanel>
<Image x:Name="MainImage" Height="60" Width="80" Margin="0,-5,0,0" Source="{Binding}" Stretch="Fill"/>
<TextBlock FontFamily="Segoe UI" FontWeight="Thin" Margin="0,-5,0,0" FontSize="22" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="PluginNameTextBlock" Text="{Binding Content}"/>
</StackPanel>
</Border>
</ControlTemplate>
In my applications I use this solution.
I have defined attached property ImgSource in class ButtonBehavior:
using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
namespace WpfStackOverflowSample
{
public static class ButtonBehavior
{
private static readonly DependencyProperty ImgSourceProperty = DependencyProperty.RegisterAttached(
"ImgSource",
typeof (ImageSource),
typeof (ButtonBehavior),
new PropertyMetadata(default(ImageSource)));
public static void SetImgSource(ButtonBase button, ImageSource value)
{
button.SetValue(ImgSourceProperty, value);
}
public static ImageSource GetImgSource(ButtonBase button)
{
return (ImageSource)button.GetValue(ImgSourceProperty);
}
}
}
Then I define ContentTemplate for "ImageButtons" and finally when I want to use this kind of buttons I just set attached property ImgSource a apply style with the ContentTemplate
<Window x:Class="WpfStackOverflowSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfStackOverflowSample"
Title="MainWindow" Height="480" Width="640">
<Window.Resources>
<Style TargetType="{x:Type ButtonBase}">
<Setter Property="Margin" Value="0,5" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style x:Key="ImgButtonStyle" TargetType="{x:Type ButtonBase}" BasedOn="{StaticResource {x:Type ButtonBase}}">
<Setter Property="local:ButtonBehavior.ImgSource" Value="/Images/unknown.png" />
<Setter Property="Padding" Value="2" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image
x:Name="img"
Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=(local:ButtonBehavior.ImgSource)}"
Stretch="UniformToFill"
Width="16" Height="16"
Margin="0,0,5,0" />
<TextBlock
x:Name="txt"
Text="{Binding}"
VerticalAlignment="Center" />
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="img" Property="Opacity" Value="0.3" />
<Setter TargetName="txt" Property="Foreground" Value="#ADADAD"></Setter>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type ButtonBase}}" />
</Window.Resources>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<Button local:ButtonBehavior.ImgSource="/Images/encrypt.png"
Style="{StaticResource ImgButtonStyle}"
Content="Encrypt" />
<Button local:ButtonBehavior.ImgSource="/Images/decrypt.png"
Style="{StaticResource ImgButtonStyle}"
Content="Decrypt"
IsEnabled="False" />
<Button Style="{StaticResource ImgButtonStyle}"
Content="No image" />
<Button Content="Classic" />
<Button Content="Classic"
IsEnabled="False" />
</StackPanel>
</Window>
Related
I've created a ListView with a selfmade ItemTemplate, that is quite nested:
<ListView x:Name="QuestionListView" ItemsSource="{Binding QuestionList, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}" Background="#afafaf" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" CornerRadius="15,0,0,15" BorderBrush="Gray" BorderThickness="0,0,1,0" Background="#676767" />
<Border Grid.Column="1" BorderBrush="Gray" BorderThickness="0,3,1,3" Background="#8f8f8f" />
<Border Grid.Column="2" CornerRadius="0,15,15,0" BorderThickness="1" BorderBrush="Gray" Background="#676767" />
<Label Content="{Binding ID}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontWeight="Bold" Foreground="Beige" />
<!--This is the TextEditor, I need in my Code behind-->
<Viewbox Grid.Column="1">
<avalonEdit:TextEditor xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit" Name="textEditor" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Width="600" FontSize="30" Background="Transparent" BorderBrush="Transparent" Foreground="Beige" PreviewLostKeyboardFocus="RichTextBox_PreviewLostKeyboardFocus" FontFamily="Consolas">
<i:Interaction.Behaviors>
<beh:AvalonEditBehaviour GiveMeTheText="{Binding TextQuestion, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</i:Interaction.Behaviors>
</avalonEdit:TextEditor>
</Viewbox>
<!--<TextBlock Grid.Column="1" IsHitTestVisible="False" FontSize="25" FontWeight="Bold" Foreground="LightGray" Text="Your question here" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding TextQuestion, Mode=TwoWay}" Value="">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>-->
<StackPanel Orientation="Horizontal" Grid.Column="2" HorizontalAlignment="Center">
<Button Margin="10,0,5,0" Width="40" Height="40" Background="Gray" Command="{Binding EditCommand}" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave">
<Image Source="{Binding EditImage}" />
</Button>
<Button Margin="5,0,10,0" Width="40" Height="40" Background="Gray" Command="{Binding DeleteCommand}">
<Image Source="{Binding DeleteImage}" />
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
Now I want to get the TextEditor textEditor in my code behind, because I need it for the "Intellisense" window, I am customizing.
So I have this in my Code behind:
public partial class QuestionListUC : UserControl
{
TextEditor editor;
public QuestionListUC()
{
InitializeComponent();
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
var template = QuestionListView.Template;
editor = (TextEditor)template.FindName("textEditor", QuestionListView);
}
}
But the FindName-Method outputs nothing for me, the variable "editor" is null.
What am I doing wrong here?
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Dispatcher.BeginInvoke(new Action(() => {
var template = QuestionListView.ItemTemplate;
editor = (TextEditor)template.FindName("textEditor",
QuestionListView);
}), DispatcherPriority.DataBind);
}
This should work
The most important change is
var template = QuestionListView.ItemTemplate;
The Dispatcher just delays the action until the data binding has been done, so the ItemTemplate should not be null
I managed to get a ViewBox around the Editor and then just use it's child. now I have the control in my CB
Is it possible to set the same style to multiple controls?
I was tried the following way. But 1st Button style was not applied correctly, in second style applied fine.
Design:
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="White" Margin="0,0,5,0">1st Button</TextBlock>
<Button Style="{StaticResource ViewButton}" />
<TextBlock Foreground="White" Margin="25,0,5,0">2nd Button</TextBlock>
<Button Style="{StaticResource ViewButton}" />
</StackPanel>
Resource:
<Style x:Key="ViewButton" TargetType="Button" BasedOn="{StaticResource ButtonStyle}">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/View.png" Stretch="None" Width="24" Height="24" />
<TextBlock Margin="5,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold">View</TextBlock>
</StackPanel>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="2,0,10,0"/>
</Style>
You're setting twice the same Content to two different Controls. The problem is that the StackPanel in the Setter.Value can't have two Parents so the last use will be applied. You can use ContentTemplate to make it work:
<Style x:Key="ViewButton" TargetType="Button" BasedOn="{StaticResource ButtonStyle}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/View.png" Stretch="None" Width="24" Height="24" />
<TextBlock Margin="5,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold">View</TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="2,0,10,0"/>
</Style>
....
....
....
You have to mention the TargetType in the as Button. and You need to write the style property following the style name as i wrote.
Hope this will work for You..
thanks
I have a dynamically generated DataGrid bound to a DataTable property in my ViewModel.
I have AutoGenerateColumnHeaders = true, and it's working fine. However, I'm using a DataTemplate to cover the Header with a StackPanel containing a Label and Button. I cannot seem to figure out how to bind the Label Content to the DataGridColumnHeader. I have tried with and without FindAncestor, but I believe the following is the closest to where I need to be...Question is on the Label Content="{}"
<local:UserControlViewBase.Resources>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Width="Auto" Orientation="Horizontal">
<Label Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type local:UserControlViewBase}},Path=DataContext.TestList.ColumnName}" Padding="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Button Content="Ok" Padding="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:UserControlViewBase.Resources>
//local:UserControlViewBase is just a UserControl with some extra bells and whistles added.
I'm fairly new to WPF and I'm assuming I'm just missing something with the binding - I'm still learning.
Thanks.
This is what I did to get it to work. I had to change the findancestor to look for the DataGridColumnHeader instead of the user control. I then was able to access the Column.Header property:
<local:UserControlViewBase.Resources>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Width="Auto" Orientation="Horizontal">
<Label Width="75" Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGridColumnHeader}},Path=Column.Header}" Padding="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Button Content="Ok" Padding="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:UserControlViewBase.Resources>
I am trying to create a Custom tooltip Control. This control is inherited from ToolTip class. My Custom Tooltip will have a header and a content area. Content could be normal text or any other content (Image, richtextbox etc). Following is the Template Style that custom tooltip control.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type customControls:FlyoutHelp}">
<Border BorderThickness="0" Margin="15" Width="300">
<Border.Effect>
<DropShadowEffect Opacity="0.7" />
</Border.Effect>
<StackPanel TextBlock.FontFamily="Trebuchet MS" TextBlock.FontSize='12'>
<TextBlock Background="{StaticResource DellBlue}" Height="23" Foreground="#FFFFFF" Padding="0,4,0,0" TextAlignment="Center" Text="{Binding HeaderText, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<Border Background="{StaticResource DellLightGrey}" TextBlock.Foreground="{StaticResource DarkestGrey}" Padding="8">
<ContentControl Content="{Binding HelpContent, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Border>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
Now as you can see in my template that I am using ContentControl for showing the content of the tooltip. The problem is when my HelpContent is just plain String, it doesn't wrap that text. I can't replace ContentControl with TextBlock because HelpContent could be some other type too (image, richtextbox etc). Can anyone please provide me what is the best way to fix this problem? I will be really very thankful.
Replace ContentControl tag with:
<ContentPresenter Content="{TemplateBinding HelpContent}">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
[Note: you can leave it as a ContentControl, but ContentPresenter is lighter and follows conventions]
Change StackPanel to Grid since it doesn't know the width for it to wrap.
<Grid TextBlock.FontFamily="Trebuchet MS" TextBlock.FontSize='12'>
<Grid.RowDefinitions>
<RowDefinitions/>
<RowDefinitions/>
<Grid.RowDefinitions/>
<TextBlock Grid.Row="0" Background="{StaticResource DellBlue}" Height="23" Foreground="#FFFFFF" Padding="0,4,0,0" TextAlignment="Center" Text="{Binding HeaderText, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<Border Grid.Row="1" Background="{StaticResource DellLightGrey}" TextBlock.Foreground="{StaticResource DarkestGrey}" Padding="8">
<ContentControl Content="{Binding HelpContent, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Border>
</Grid>
<UserControl.Resources>
<Style x:Key="PushPinStyle" TargetType="Maps:Pushpin">
<Setter Property="Width" Value="250"/>
<Setter Property="Height" Value="80"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Foreground="Red" Text="HERE MUST BE TEXT" Grid.Row="0"/>
<Image Grid.Row="1" Source="ms-appx:///Images/Icons/Pushpin.png" Stretch="Uniform" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
When i create pushpin:
Pushpin pushpin = new Pushpin();
pushpin.Style = this.Resources["PushPinStyle"] as Style;
I want to access the text block's text and visibility properties from C# code.
There will be something like a button "Go to next pushpin" on a page, the map gets centred on other pushpin, and TextBlock is becoming visible
Xyroid's comment helped me out:
<TextBlock Foreground="Red" HorizontalAlignment="Center" Visibility="{Binding Path=Visibility}" Text="{Binding Path=Label}" Grid.Row="0"/>
<Image Grid.Row="1" Source="ms-appx:///Images/Icons/Pushpin.png" Stretch="Uniform" HorizontalAlignment="Center"/>