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>
Related
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 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>
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I have the following xaml:
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="67" />
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1">
<TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap" MaxWidth="Infinity" />
<TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
</StackPanel>
<StackPanel Height="auto" Grid.Column="2">
<TextBlock Text="{Binding comment_count}"></TextBlock>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
As you can see I would like to have the first column of my grid set to 67.. perfect, and working fine...
The next column needs to fill as much as it can of the screen minus the extra columns width after it.
How do I go about doing this?
Kind of linked to this: How to TextWrap a TextBlock within a width Auto Column? but I couldn't get the * thing to work... I'm not sure it really does what I need it to do
It's because you've got:
MaxWidth="Infinity"
on your TextBlock and
<ColumnDefinition Width="Auto"/>
on your column.
This means that the XAML thinks it can grow that column as much as it likes to fit the text in.
If you want the text to wrap you'll have to provide a limit to either the width of the column, the width of the grid or the width of the stack panel.
If you want the middle column to take the remaining space then just specify it's width with a *:
<ColumnDefinition Width="*"/>
I'm making a chat client for WP7 in which you can share photos.
We have a setup where a message appears in a little chat box with user's nickname, a StackPanel for an image (if a URL string is provided along with the message), and a StackPanel for the message text.
It'd be great if a user could tap directly on the image to see a larger version. However, I can't get any events to fire.
I've used the approach of changing a button's template to be just an image before (not in a data template though) and it's worked fine. But this DataTemplate (separate file from the full view) is not working.
How can I accomplish this? Is this doable in a ListBox, or am I stuck to the awkward Twitter style of having to select the whole message, then look at a full view of the image?
EDIT
I tried the GestureListener approach, but ran into a problem where it couldn't parse the event handler name and would just throw an exception when I ran the app.
My data templates are in separate XAML files. I assumed there wouldn't be any difference in defining each template in the same file as the PhoneApplicationPage. Is that correct?
<DataTemplate x:Name="LeftMessageTemplate">
<Grid Margin="0,0,0,17" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="3" BorderBrush="{StaticResource ChatPivotSubBrush}" Margin="0, 3, 9, 0" VerticalAlignment="Top">
<Image Source="{Binding AvatarURL}" Height="60" Width="60" VerticalAlignment="Top"/>
</Border>
<Grid Grid.Column="1" Width="372" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" HorizontalAlignment="Right" Orientation="Horizontal" Background="Transparent">
<Image Source="/my_chatclient;component/Images/chattheirspointercroppedwp7.png" VerticalAlignment="Top" Margin="0, 28, 0, 0" Height="19" Width="13"/>
<StackPanel Background="{StaticResource ChatPivotMainBrush}" Width="Auto" HorizontalAlignment="Left" MinHeight="66" VerticalAlignment="Top" Margin="0, 3, 0, 0" Orientation="Horizontal">
<StackPanel Margin="4, 4, 4, 4">
<Button>
<Button.Template>
<ControlTemplate>
<Image Source="{Binding PictureURLPreview}" VerticalAlignment="Top" MaxWidth="200"/>
</ControlTemplate>
</Button.Template>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ViewPictureCommand, Mode=OneWay}" />
</i:EventTrigger>
</Button>
</StackPanel>
<StackPanel MaxWidth="340" Orientation="Vertical" Margin="12,12,12,12">
<TextBlock FontWeight="Bold" Foreground="{StaticResource ChatDarkerBlueBrush}" Text="{Binding CreatorNicknameLabel}" TextWrapping="NoWrap" Margin="0, 0, 0, 0" FontSize="18" />
<TextBlock MaxWidth="316" Foreground="{StaticResource ChatDarkerBlueBrush}" Text="{Binding Text}" TextWrapping="Wrap" Margin="0,0,0,0" FontSize="16" />
<TextBlock Foreground="{StaticResource ChatDarkerBlueBrush}" FontWeight="Light" Text="{Binding CreatedAtLabel}" TextWrapping="Wrap" Margin="0, 0,0 ,0" FontSize="14" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
If I understood it correct, here is a way to accomplish it. Add the image to a button with an event handler. Something like:
<StackPanel Grid.Column="0" HorizontalAlignment="Right" Orientation="Horizontal" Background="Transparent">
<Button Click="ShowLarger" BorderThickness="0">
<Image Source="/my_chatclient;component/Images/chattheirspointercroppedwp7.png" VerticalAlignment="Top" Margin="0, 28, 0, 0" Height="19" Width="13"/>
</Button>
<StackPanel Background="{StaticResource ChatPivotMainBrush}" Width="Auto" HorizontalAlignment="Left" MinHeight="66" VerticalAlignment="Top" Margin="0, 3, 0, 0" Orientation="Horizontal">
<StackPanel Margin="4, 4, 4, 4">
<Button>
<Button.Template>
While there's not a awful lot of information here, I would recommend you bind a event to the Image itself, rather than using a Button's ContentTemplate for it.
With the Silverlight Toolkit you can simply use their geatureservice, like this:
<Image Source="{Binding PictureURLPreview}" VerticalAlignment="Top" MaxWidth="200">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener>
<i:EventTrigger EventName="Tap">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ViewPictureCommand, Mode=OneWay}" />
</i:EventTrigger>
</toolkit>
</toolkit:GestureService.GestureListener>
</Image>
Use the Tap-event:
<Image Tap="doYourThing ... />