I'm a newby in WPF, so please exuse if this is a trivial question...
I need to create many similar controls, each of them consists of a picture and a title below. I try this way:
XAML (Style with a template inside of a ResourceDictionary):
<Style x:Key="myStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="300"></Setter>
<Setter Property="Height" Value="320"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Margin="5 2" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Width="300" Height="250" x:Name="picGraph" Source="picture1.png" />
<TextBlock Grid.Row="1" Text="title1" HorizontalAlignment="Center" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
XAML (Usage):
<Button Style="{StaticResource TestGenResultsGraph}"/>
That's all good, but I want to be able to change the Source-property of the image and Text-property of the textblock when I use the Button (to use more than only picture1.png).
I tried to add a setter for a Source-property, but it doesn't work this way, because Button-control doesn't have it:
<Setter Property="Source" Value="picture1.png"/> <!-- Error: The member "Source" is not recognized or is not accessible-->
So generally I would like to have a possibility of usage like that:
<Button Style="{StaticResource myStyle}" Source="picture1.png" Title="title 1"/>
How can I make those properties of children being settable in the parent?
A Button has indeed no Title or Source properties. If you don't want to create your own custom control, you should be able to use the Content and Tag properties:
<Button Style="{StaticResource myStyle}" Tag="picture1.png" Content="title 1"/>
Template:
...
<Image Width="300" Height="250" x:Name="picGraph"
Source="{Binding Tag, RelativeSource={RelativeSource AncestorType=Button}}" />
Related
I am trying to get a border to show around an avalonEdit 'box' in a Wpf control but can't seem to make it happen.
I added BorderBrush="Black" BorderThickness="2" but clearly I am missing something.
I've googled but, despite my endeavors, I cannot find anything - I suspect I may not know the correct terminology to Google for because it feels like it should be straightforward!
Code as follows:
<Label Content="Account:" HorizontalAlignment="Left" Margin="10,28,0,0" VerticalAlignment="Top"/>
<TextBox Name ="textBoxAccount" HorizontalAlignment="Left" Height="23" Margin="66,28,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120"/>
<Label Content="Query:" HorizontalAlignment="Left" Margin="10,59,0,0" VerticalAlignment="Top"/>
<Button x:Name="btnGo" Content="Go!" HorizontalAlignment="Left" Height="25" Margin="10,342,0,0" VerticalAlignment="Top" Width="146"/>
<avalonEdit:TextEditor
xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit"
x:Name="textEditor"
FontFamily="Consolas"
SyntaxHighlighting="AWQL"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
WordWrap="True"
Visibility="Visible"
BorderBrush="Black" BorderThickness="2"
FontSize="10pt" Margin="12,89.96,10,0" Height="229" VerticalAlignment="Top"/>
</Grid>
which renders like this:
but the 'avalonEdit' box doesn't seem to render the border so looks invisible unless/until a user clicks inside it and starts typing.
I'd really like the border to look the same as the simple textbox at the top of the user control but right now I'd settle for anything visible!
I only worked once with avalon before so I cooked up a quick project which does what you want.
As a disclaimer, AvalonEdit seems to ruin any attempt to put a border around it like you said. So I set it up using a grid to put a border around it.
It will look something like this:
And the code will look like this:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="600" Height="500"
xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Account:" HorizontalAlignment="Left" Margin="20,20" VerticalAlignment="Top" Height="26" Width="56" />
<TextBox Grid.Column="1" Grid.Row="0" Name="textBoxAccount" HorizontalAlignment="Left" Height="26" Margin="20" TextWrapping="Wrap"
VerticalAlignment="Top" Width="120" />
<Label Grid.Column="0" Grid.Row="1" Content="Query:" HorizontalAlignment="Left" Margin="20,0" VerticalAlignment="Top" Height="26" Width="45" />
<Border Grid.ColumnSpan="2"
Grid.Row="2"
Grid.Column="0" BorderBrush="Black" BorderThickness="1"
Margin="20"
Height="230">
<avalonEdit:TextEditor
x:Name="textEditor"
FontFamily="Consolas"
SyntaxHighlighting="AWQL"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
WordWrap="True"
Visibility="Visible"
FontSize="10pt" VerticalAlignment="Top" Height="226"/>
</Border>
<Button Grid.Column="0" Grid.Row="3" x:Name="btnGo" Content="Go!" HorizontalAlignment="Left" Height="25" Margin="20"
VerticalAlignment="Top" Width="146" />
</Grid>
This is not exactly what you want, but a grid will help with other issues as well in the long run
This is the avalonEdit:TextEditor style (TextEditor.xaml):
<Style TargetType="{x:Type AvalonEdit:TextEditor}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="FlowDirection" Value="LeftToRight"/> <!-- AvalonEdit does not support RTL, so ensure we use LTR by default -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type AvalonEdit:TextEditor}">
<ScrollViewer
Focusable="False"
Name="PART_ScrollViewer"
CanContentScroll="True"
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextArea}"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
/>
<ControlTemplate.Triggers>
<Trigger Property="WordWrap"
Value="True">
<Setter TargetName="PART_ScrollViewer"
Property="HorizontalScrollBarVisibility"
Value="Disabled" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And this is an explanation about why ScrollViewer doesn't show borders: https://social.msdn.microsoft.com/Forums/vstudio/en-US/a2310302-167b-44e2-bc23-825ff1610701/scrollviewer-border
So, I think the best way is to wrap the TextEditor inside a Border as Guerudo says or modify the template in Avalon code TextEditor.xaml.
I didn't work with avalonEdit but I can suggest you an other way : you could wrap your TextEditor inside a <Border> </Border>.
It's probably not the best solution but it is one.
The AvalonEdit community nicely fixed this problem by changing the TextEditor style from the project:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type AvalonEdit:TextEditor}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer
Focusable="False"
Name="PART_ScrollViewer"
CanContentScroll="True"
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextArea}"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left"
Padding="{TemplateBinding Padding}"
/>
</Border>
I've got a custom control that is a textbox and two buttons inside a frame.
I'd like the frame to display the typical textbox border-behaviour. Currently, it just has a black border. Is there a short way or will I need 200 lines of XAML?
(I've found some examples e.g. the ComboBoxStyles-Example from MS, but .. these do use 200 lines of XAML).
This is the style for the IntegerSpinControl:
<Style TargetType="{x:Type cc:IntegerSpinControl}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type cc:IntegerSpinControl}">
<Border BorderThickness="1" BorderBrush="Black">
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch">
<Grid DockPanel.Dock="Right" x:Name="grid1"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<RepeatButton Grid.Row="0"
Grid.Column="1"
Width="22"
Height="10"
Padding="0"
BorderThickness="0"
Command="{x:Static cc:IntegerSpinControl.IncreaseCommand}">
<RepeatButton.Content>
<Rectangle Width="16"
Height="5"
Fill="{StaticResource brush.scroll.up}" />
</RepeatButton.Content>
</RepeatButton>
<RepeatButton Grid.Row="1"
Grid.Column="1"
Width="22"
Height="10"
Padding="0"
BorderThickness="0"
Command="{x:Static cc:IntegerSpinControl.DecreaseCommand}">
<RepeatButton.Content>
<Rectangle Width="16"
Height="5"
Fill="{StaticResource brush.scroll.down}" />
</RepeatButton.Content>
</RepeatButton>
</Grid>
<TextBox DockPanel.Dock="Left"
BorderThickness="0"
HorizontalAlignment="Stretch"
Grid.Row="0"
Grid.Column="0"
Width="Auto"
Margin="0,0,1,0"
VerticalAlignment="Center"
IsReadOnly="True"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=FormattedValue,
Mode=OneWay}" />
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
There is already a control in the Extended WPF Toolkit that might be what you are looking for:
IntegerUpDown Control
Maybe you can use that instead?
BTW: There are also a Decimal and a Double version in the toolkit.
That being said, if you have to use your own Custom Control you will have to create the Templates and Styles yourself, however you can probably copy heavily from the Windows defaults.
I have a number of buttons on a form (devcomponents ButtonDropDown controls to be precise).
I want to show a tool tip for each that contains a header at the top, an image on the left and a description on the right.
The header needs to be tied to the ButtonDropDown.Header, the image to the ButtonDropDown.Image. I also then need to define the description somewhere.
I've only been using WPF for a few weeks so I've not managed to find any answers via searching, though I have studied a few.
Below is my attempt at creating a template that really doesn't work at all:
<Style TargetType="dcr:ButtonDropDown">
<Setter Property="OverridesDefaultStyle" Value="True"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dcr:ButtonDropDown">
<ContentControl>
<ContentControl.ToolTip>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Content="{TemplateBinding Header}" FontWeight="Bold" />
<Viewbox Grid.Row="1" Grid.Column="0" Width="64" Height="32" Margin="3">
<ContentControl Content="{TemplateBinding Image}" />
</Viewbox>
<Label Grid.Row="1" Grid.Column="1"
Content="{TemplateBinding ToolTip.Content}" />
</Grid>
</ContentControl.ToolTip>
</ContentControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I then define a button as follows:
<dcr:ButtonDropDown Header="-X" Command="{Binding MoveCommand}" CommandParameter="xMinus"
ImagePosition="Top" IsEnabled="{Binding UserConfiguration.Move.Visible}"
ToolTip="move x axis down">
<dcr:ButtonDropDown.Image>
<Viewbox Width="32" Height="32" Margin="3">
<ContentControl Content="{StaticResource minusXImage}" />
</Viewbox>
</dcr:ButtonDropDown.Image>
</dcr:ButtonDropDown>
Please could someone give me an idea how to go about this?
I've gone some way to answering this question.
The following style is defined for ToolTip:
<Style TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Header)}"
FontWeight="Bold" />
<Viewbox Grid.Row="1" Grid.Column="0" Width="64" Height="32" Margin="3">
<ContentControl Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Image)}" />
</Viewbox>
<Label Grid.Row="1" Grid.Column="1"
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.ToolTip)}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I then define a button as above and the ToolTip text and header appear in the ToolTipas required.
The key is the binding:
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Header)}"
Which finds the Tooltip as an ancestor of Label and casts its PlacementTarget into a ButtonDropDown
What doesn't work is the image. This appears in the ToolTip but is removed from the button.
This will also break any other controls' tooltips if they are not ButtonDropDown controls.
I'm beginning to think I'll need to create some custom controls that contain the information I require for the ToolTip for each control.
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"/>