I am trying to add filtering to my WPF app, so I figured that I want to have an ellipse, and inside it will be a TextBox whose Text will be bound to a FilterText property in my ViewModel.
What I have tried:
<TextBox
Width="30"
Height="30">
<TextBox.Template>
<ControlTemplate>
<Grid>
<Ellipse Stroke="Black" StrokeThickness="1" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding FilterText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TextElement.Foreground="Black" />
</Grid>
</ControlTemplate>
</TextBox.Template>
</TextBox>
I took this from the same example, but with Label.
This displays the ellipse, but no TextBox inside it.
How can I create an ellipse WITH a TextBox?
Try this
<Grid>
<Ellipse Stroke="Black" StrokeThickness="1"/>
<TextBox Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
Fixed it by wrapping the TextBox inside a Border and setting the Border's CornerRadius:
<Border
Width="30"
Height="30"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="30">
<TextBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="Transparent" //important to lose the TextBox look
BorderBrush="Transparent" //important to lose the TextBox look
BorderThickness="0" //important to lose the TextBox look
Text="{Binding FilterText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Border>
Related
I want to make a Hexagon button for a specific button in XAML code. Does somebody know how to do that?
You could use a Datatemplate to change the appearance of the button, check this code:
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Margin="305.661,0,180.661,87.258" Background="{x:Null}" BorderBrush="{x:Null}">
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Polygon Points="25,0 50,0 75,25 75,50 50,75 25,75 0,50 0,25" Stroke="Red" StrokeThickness="3" Fill="LightBlue"></Polygon>
<TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"></TextBlock>
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
I have a stackpanel that contains an image and a TextBlock.
TextBlock is bound to a style which makes it blink alternating its background color from Red to Black and viceversa.
I would like to bind the TextBlock backgorund color to stackpanel background color, that is, when TextBlock background color is Red I need stackpanel background color to be Red, and when TextBlock background color is Black, then stackpanel background color must change to Black and so on...
Below my code:
<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<StackPanel Orientation="Horizontal" Width="auto" Background="Red">
<Image Width="24" Height="24" Source="/My.Images;component/Warning.png" />
<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>
</StackPanel>
</Border>
I have solved by binding TextBlock background property to stackpanel background property:
<Border Visibility="{Binding Path=BlinkOn, Converter={StaticResource BoolToVis}}" BorderThickness="1" BorderBrush="Red" CornerRadius="5" Margin="5">
<StackPanel Orientation="Horizontal" Width="auto">
<StackPanel.Background>
<Binding ElementName="txtStoryboard" Path="Background"/>
</StackPanel.Background>
<Image Width="24" Height="24" Source="/My.Images;component/Warning.png" />
<TextBlock x:Name="txtStoryboard"
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>
</StackPanel>
</Border>
I wish to display a ToolTip for an entry in a Listbox.
The Toolkit will contain a Textbox and a copy (larger) of the Image in the entry in the Listbox
I can get either the Text in the Textbox Or the Image to display.
The code which displays the image but not the text is
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="#EEFFFFFF" BorderBrush="#FFCCCCCC"
HorizontalAlignment="Center" VerticalAlignment="Center"
BorderThickness="1">
<Grid>
<StackPanel Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Image x:Name="img" ToolTipService.Placement="Top"
Source="{Binding Path=ImageUri}" Height="64" Stretch="Uniform" Width="64">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="scaleTrans"/>
</TransformGroup>
</Image.RenderTransform>
<Image.ToolTip>
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center" Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
This code is part of the code for which is used by a ListBox
The code below (as in the list above display the Image in the tooltip but not the Textbox
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center"Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
If you remove
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}" from <ToolTip
The Text works as expected but the Image now fails (as expected)
I have tried to
a) modify the original so the TextBlock binding point to the FTitle entry observable Collection driving the listbox entries
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=DataContext.FTitle, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
b) moved the datacontext in to Image
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=DataContext.Source, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Image}}}"/>
</Border>enter code here
Neither worked. (I did try many variations But none worked.
I would be grateful for either solution
{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}} will bind the UIElement (a ListBoxItem) as the DataContext for the tooltip. It seems you want the DataContext of the ListBoxItem in order to bind to properties of the underlying model. In which case, try changing your DataContext binding to be: {Binding Path=PlacementTarget.DataContext, RelativeSource={x:Static RelativeSource.Self}}
I have listbox control with custom data template. I get the collection from webservice and bind that collection to listbox. When i scroll the list box top to bottom my listbox rows are changed and text are concatenate.
Please see the below images
This is my first screen
when scroll top to bottom once again
please compare two images my rows are changed
<Grid Margin="30,20,0,20" x:Name="MeGrid" Loaded="MeGrid_Loaded" Visibility="{Binding Path=_isMyMessage, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel >
<TextBlock HorizontalAlignment="Right" Foreground="#00c0d4" Margin="0,0,100,0" Text="{Binding Path=CreatedDate, Converter={StaticResource TimeSinceConverter}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Grid Background="#ffffff" Height="auto" Width="auto" MaxWidth="300" MinWidth="50">
<StackPanel Background="White">
<RichTextBox Name="MeRich" Background="White" MaxHeight="600" Foreground="Red"
FontFamily="Segoe UI" Margin="10,0,10,0" VerticalAlignment="Center"
TextWrapping="Wrap" Height="auto"
Width="auto" MinWidth="50"
MaxWidth="300"
local:Properties.Html="{Binding Path=MessageText}">
</RichTextBox>
<readMore:Readmore Source="{Binding Path=MessageText}" Visibility="{Binding ActualHeight,
ElementName=MeRich, Converter={StaticResource ReadMoreVisibilityConverter}}" ></readMore:Readmore>
<!--<TextBlock Margin="10,0,10,0" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Height="auto" Width="auto" MinWidth="50" MaxWidth="300" Text="{Binding Path=MessageText}"
/>-->
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=AttachmentList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5">
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="/Resources/Drawable/c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
<Rectangle Margin="20,0,0,0" VerticalAlignment="Top" RadiusX="50" RadiusY="50" Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=UserPictureURL}"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</StackPanel>
</Grid>
I have code in wpf which use ToggleButton.
<Grid>
<ToggleButton x:Name="pinButton" VerticalAlignment="Center" Width="auto" MaxWidth="26" Height="26"
Background="{DynamicResource MyBorderBlueGradientBrush}" Focusable="False"
DockPanel.Dock="Right" BorderThickness="0"
OverridesDefaultStyle="False" BorderBrush="{DynamicResource MyBorderBlueGradientBrush}" FontFamily="Webdings">
<Label x:Name="Pinback" Background="{DynamicResource MyBorderBlueGradientBrush}" Width="26" Height="26" BorderBrush="{DynamicResource MyBorderBlueGradientBrush}">
<Label x:Name="Pin" FontSize="18" Foreground="White" Content="" Width="25" Height="25" Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
<Label.RenderTransform>
<RotateTransform Angle="16" CenterX="29" CenterY="0"></RotateTransform>
</Label.RenderTransform>
</Label>
</Label>
</ToggleButton>
</Grid>
When I run this code, I got this window.
So My question is "How the content change into pin image".When I change the content it convert in other image.
The pin is coming from a character from the Webdings FontFamily in your XAML:
<Label x:Name="Pin" FontSize="18" Foreground="White" Content="" Width="25"
Height="25" Background="Black" HorizontalAlignment="Center"
VerticalAlignment="Center" />
Note the Content property... obviously, you can't see the character here, because that font is not common on websites. Also note the FontFamily declared in the ToggleButton:
<ToggleButton x:Name="pinButton" VerticalAlignment="Center" Width="auto" MaxWidth="26"
Height="26" Background="Blue" Focusable="False" DockPanel.Dock="Right"
BorderThickness="0" OverridesDefaultStyle="False" BorderBrush="Blue"
FontFamily="Webdings">