I want to have a textbox which always displays an Error Bob next to it. For that I wrote the below code:
<TextBox Text="My TextBox" HorizontalAlignment="Center" VerticalAlignment="Center" Height="75" Width="75">
<TextBox.Template>
<ControlTemplate>
<DockPanel>
<Image..."error bob image is added here"/>
<Border BorderBrush="Red" BorderThickness="1.2"/>
</DockPanel>
</ControlTemplate>
</TextBox.Template>
</TextBox>
I am able to see the same in the designer. However when I run this solution, I see only a textbox with a red border. The image (i.e., the error bob) is not visible. Can anyone suggest why this happens?
Try to set property LastChildFill="True" of DockPanel:
<TextBox Text="My TextBox" HorizontalAlignment="Center" VerticalAlignment="Center" Height="75" Width="75">
<TextBox.Template>
<ControlTemplate>
<DockPanel LastChildFill="True">
<TextBox BorderThickness="0"/>
<TextBlock Text="error bob image is added here" Width="100"/>
<!--<Image..."error bob image is added here"/>-->
<Border BorderBrush="Red" BorderThickness="1.2"/>
</DockPanel>
</ControlTemplate>
</TextBox.Template>
</TextBox>
You can use TextBlock with Width instead of Image to show your text "error bob".
Update:
I double checked and it works. Please, see the following image:
In addition, you can use StackPanel, if it is okay:
<TextBox Text="My TextBox" HorizontalAlignment="Center" VerticalAlignment="Center" Height="75" Width="275">
<TextBox.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<TextBox BorderThickness="0"/>
<TextBlock Text="error bob image is added here" Width="100"/>
<Border BorderBrush="Red" BorderThickness="1.2"/>
</StackPanel>
</ControlTemplate>
</TextBox.Template>
</TextBox>
Related
I have below WPF TextBlock within a border:
<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<TextBlock x:Name="lblStoryboard"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Style="{StaticResource BlinkingTextBlock}"
Text="Hi there!"
TextWrapping="WrapWithOverflow"
Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}">
</TextBlock>
</Border>
Now I am trying to insert an inline image in front of the Textblock text, I mean, to the left (left side) of the TextBlock text and in the same line. How can I do this?
Add Stackpanel with Horizontal Orientation.
I have removed the binding since it as nothing to do with Adding image.
<Border BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<StackPanel Orientation="Horizontal" Margin="0,0,0,-1">
<Image Source="C:\Users\Administrator\source\repos\WpfApp4\WpfApp4\Koala.jpg" Margin="0,459,0,0" />
<TextBlock x:Name="lblStoryboard"
HorizontalAlignment="Center"
TextAlignment="Center"
Padding="5"
Width="Auto"
Background="Red"
Foreground="Black"
FontSize="12.5"
FontWeight="Bold"
Text="Hi there!"
TextWrapping="WrapWithOverflow" Margin="0,459,0,0"
/>
</StackPanel>
</Border>
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.
I`ve created big button which contains grid as below:
<Button Height="Auto" Width="Auto" Command="{Binding ContinueWithoutScan}" BorderThickness="0">
<Button.Template>
<ControlTemplate>
<Grid >
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap" Text="Text"
VerticalAlignment="Center" FontWeight="DemiBold"
Height="Auto" Width="Auto"
FontSize="25" Foreground="White"/>
<materialDesign:PackIcon Height="Auto" Width="70" Kind="ChevronRight" Foreground="White"
VerticalAlignment="Center" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
There is problem that only TextBlock inside Template is clickable. Does anyone know how do I make whole content clickable? I working with MVVM so I dont want make Grid.OnMouseEneter.
Is there option to do that of I have to use EventTriggers?
The Grid needs to have a Background other than the default null to receive input events. You may set a transparent background instead of null:
<Grid Background="Transparent">
...
</Grid>
I'm trying to implement a template for my TextBox which displays at the right of the TextBox a little Image like it can be achieved inside ValidationTemplates:
<ControlTemplate x:Key="TextBoxTemplate">
<DockPanel>
<Grid x:Name="image" DockPanel.Dock="Right" Margin="3,0,0,0" Width="20" Height="20">
<Ellipse Width="20" Height="20" Fill="Red" />
<TextBlock Text="!" VerticalAlignment="Top" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="16" TextAlignment="Center" Margin="7,-1" />
</Grid>
<AdornedElementPlaceholder />
</DockPanel>
</ControlTemplate>
But when I try to bind the TextBox.Template Property to this StaticResource:
<TextBox Template="{StaticResource TextBoxTemplate}" Text="Test">
it does not show the TextBox itself.
I found a workaround for this by placing another TextBox inside the ControlTemplate instead of the AdornedElementPlaceholder and Binding the different values (Text, Style etc.) to the TemplatedParent:
<ControlTemplate x:Key="TextBoxTemplate">
<DockPanel DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<Grid x:Name="image" DockPanel.Dock="Right" Margin="3,0,0,0" Width="20" Height="20">
<Ellipse Width="20" Height="20" Fill="Red" />
<TextBlock Text="!" VerticalAlignment="Top" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="16" TextAlignment="Center" Margin="7,-1" />
</Grid>
<TextBox Text="{Binding Text}" Style="{Binding Style}" Width="{Binding Width}" Height="{Binding Height}" />
</DockPanel>
</ControlTemplate>
But this is a rather ugly approach because you have to bind each Property explicitly.
Is there another easier way?
How is the AdornedElementPlaceholder in ValidationTemplate done? Couldn't I use it for my ContentTemplate?
Cheers,
Ialokim
Your mistake is what AdornedElementPlaceholder is used in conjunction with Validation.ErrorTemplate. In this case it will take original control and put it in a place of AdornedElementPlaceholder.
If you use Template, then nothing will automatically take original control, you should define complete template.
I'd recommend to create a normal UserControl if you want to simply combine several controls into one, way simpler than to deal with complete templates.
I'm working on a control for my WPF application in which I want a Button inside of a TextBox. The Button will contain an image that changes with a mouseover, but I already know how to do that part. What I'm having trouble with is actually including the Button in the TextBox so that it only takes up as much space as the image and is transparent. Below is the markup that I've tried so far:
XAML:
<Grid>
<TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" Margin="5, 5, 10, 5" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
<Button Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<Button.Content>
<Image Source="Image.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button.Content>
</Button>
</Grid>
I've followed along with this question: How to implement a textbox with a clear button in wpf?, which also linked to this article: WPF Search Text Box. The XAML suggested in the question didn't work, which I think is because of the Style they use, which I don't have access to. The article provided too much information, mostly talking about the triggers and dependency properties needed in order to swap out searching and deleting icons on mouseovers. So, I'm asking for help finding a simple solution on how to make this happen. Thank you!
EDIT: I've followed the advice of the answers, and I'm able to style the button correctly, but it won't show up in the textbox still, and if it does, the text still runs underneath it. I've included the XAML and a picture of what's happening:
XAML:
<Grid Margin="5, 5, 10, 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
<Button Background="{Binding Backgound, ElementName=SearchBoxView}" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Click="SearchBoxViewButtonClick" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Image.png" Width="12" Height="12"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
Image:
Specify Button template, instead of content
<Button>
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
EDIT
BTW, in your case the image will cover TextBox and entered text. I would recommend to put this controls in the different columns of the grid like bellow
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchBoxView"
HorizontalAlignment="Right"
Width="200" Margin="5, 5, 10, 5"
FontSize="16"
KeyUp="SearchBoxKeyDown"
Text="{Binding SearchText, Mode=TwoWay}"
Grid.Column="0"/>
<Button
Grid.Column="1"
Background="Transparent"
HorizontalAlignment="Right"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>