My form in wpf has has to look like this:
I need to create a textbox that contains a button and an image. The idea of this is that when I click on the image the text entered is shown as bullets . How can I do this in wpf? I don't know what tools to use.
Think of it as creating a user control and adding a textbox and a button to it, not as adding a button to a textbox (and note you can have the button overlap the textbox to create a similar effect).
If you want to use it at just one place.. you can achieve this like below:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.ColumnSpan="2"/>
<Button Margin="3" Grid.Column="1" Width="30">
<Image Source="myImage.png"/>
</Button>
</Grid>
You can make a borderless TextBox, and a button (with the image) near it, and surround them both with a border, what will give you the look anf funcionality you want.
Related
Working on the XAML file and C# at the back end.
I have totally 4 buttons.
By clicking 1st, other three will be Visible and by clicking same 1st button the three will hide.
Though they are working fine, I want them to aligned vertical and not horizontal by breaking the line.
Also I need to add images before each buttons. Something like this.
Please suggest. Thank you.
Followed this answer, but I understand its for the text and not for buttons.
Here's by code for the buttons:
<Button Content ="Buttons" Click="ButtonBase_OnClick" Margin="15,15,15,15"></Button>
<Button Content="Topo Map" Visibility="Collapsed" Click="Topo_OnClick"
Name="But2" Margin="15,15,15,15"/>
<Button Content="Street Map" Visibility="Collapsed" Click="Street_OnClick"
Name="But3" Margin="15,15,15,15"/>
<Button Content="Imagery Map" Visibility="Collapsed"Click="Imagery_OnClick"
Name="But4" Margin="15,15,15,15"/>
You will need to wrap your buttons in a content container, like a stackpanel or grid. Keep in mind a stack panel will size to fit it's contents where a grid can size to fit available space. I would use a stackpanel to hold the buttons and a grid to hold your button content:
<StackPanel Orientation="Vertical">
<Button Click="ButtonBase_OnClick" Margin="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image />
<TextBlock Text="Buttons" />
</Grid>
</Button>
...
</StackPanel>
I think you're looking for the WrapPanel of the Silverlight Toolkit.
I have a grid of controls, where each editable control (checkbox, combobox, etc.) has an associated label. I want to share a tooltip between the label and its control.
Now this is something that I have accomplished by using BindableToolTips: I simply define the ToolTip in my XAML resources, and then set the same ToolTip object individually on the label and the control.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Content="Example" />
Unfortunately, this doesn't make it appear smoothly... When the mouse is moved from the label to the control, or from the control to the label, the tooltip disappears and reopens, appearing to flicker. This occurs even when there is no gap between the label and control, and does not look good. This obviously occurs because they are two separate tooltips.
I would like to somehow group the label and its associated control, and have the tooltip appear on that single group; this way, it can appear fluidly and not flicker when the mouse is moved between the two. Unfortunately, I am struggling to do this. Here are some things I have tried...
Empty TextBlock with the tooltip applied and ColumnSpan=2.
Unfortunately, this prevents the control from receiving mouse clicks, as the TextBlock covers it up invisibly. I have tried setting IsHitTestVisible to false, but then that prevents it from receiving mouse over events, which stops the tooltip appearing at all. If I could just make it so that the mouse clicks through the empty TextBlock, but the TextBlock still gets mouse over events, then it would be perfect.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}" />
Nested grid specifically for the one label and one control.
This method seems to work: the tooltip appears whenever the mouse is anywhere over the inner grid, and mouse events are still successfully passed to the control. Unfortunately, this has three problems:
It is very messy, as I will need many nested grids for every label/control combination.
The "Auto" column widths no longer take into account the widths of other controls in the outer grid, because this is of course a separate grid.
It seems to ignore the tooltip placement settings, which are Placement=Right and with PlacementTarget being the specific control. Instead, the tooltip appears underneath the inner grid.
If the last two problems could be fixed, then this would be an acceptable solution.
Code:
<Grid Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
</Grid>
Does anybody have any ideas for a good solution to this problem? I simply want my tooltips to appear over both the label and the associated control as though they are one element, without flickering when the mouse is moved between them all. That's all.
Just wrap the controls in a content presenter and attach the tooltip to that.
<Window x:Class="StackOverflowWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<ContentPresenter ToolTip="Blah">
<ContentPresenter.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Example label:"/>
<CheckBox Grid.Column="1" x:Name="ExampleControl" Content="Example" />
</Grid>
</ContentPresenter.Content>
</ContentPresenter>
</Window>
I have a small user control that contains some Xaml markup that includes a TextBox. When the control is selected, I automatically set focus on the TextBox. However, when the user clicks on any other element (such as a border) the focus is removed from the TextBox.
For example,
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="Blue" IsHitTestVisible="False" />
<TextBox Grid.Row="1" />
<TextBlock Grid.Row="2" Text="Something" IsHitTestVisible="False" />
</Grid>
Clicking either the Rectangle or the TextBlock causes the TextBox to lose focus.
What's the best way to retain focus on the TextBlock? I feel I'm missing something simple.
The click is probably going through the grid and giving focus to whatever is under it.
Try setting Background="Transparent" on the <Grid>
The only solution I found was to rebuild the Xaml surrounding the control in question so that custom control incorporated everything that I wanted to not affect the the focus of the text box. And then put a handler on the mouse event to ensure that the TextBox retained focus.
I was not happy with the solution but couldn't think of anything else.
( I did try to handle the LostFocus event and determine if the mouse was still the user control, but gave up with that route when I had to continually keep track of the mouse location ).
What is the name of the control that is highlighted blue?
I want to make this:
(source: deviantart.net)
It would be helpful if you found some link to a library. I've searched using many different names (TaskButton/TaskPanel/StackPanel) but I'm really off.
Thanks.
Please note that the second image is only a concept sketch, and that it's not a real application.
This is most likely a custom (user) control which has been created by composing a number of standard WPF controls. It could easily be constructed in WPF using a horizontal StackPanel with various Image, TextBlock and Button elements as its content
I do not believe that the control you are pointing to is a .NET or WPF control. Most Windows 7 user interface elements are still native C/C++ resources.
That said, it is relatively easy to replicate that behavior using WPF 4.0, through a ListBox with a custom ItemTemplate. Take a look at this question to get you started.
It looks rather like a CommandLink control to me, something that first appeared in Vista. It's never been exposed as a control for use in Windows Forms or WPF, but this question contains information on how to make it available for your own use:
I suppose it is a WPF user control, created specifically for this application. It looks like it consists of a Image, some TextBox controls and a Button which in turn contains an Image.
I don't know how that control is called but my bet it is it's a custom windows form control, here's a link to get you started
I got it. You can do this with the help of a simple button in WPF.
You have to embed another button and those images to that button.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Button Height="38" Margin="12,49,83,0" Name="button1" VerticalAlignment="Top"></Button>
<Grid Height="32" Margin="113,48,80,0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="13*" />
<RowDefinition Height="19*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="12*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<Button Margin="0,6,0,0" Name="button2" HorizontalAlignment="Left" Width="35" Grid.ColumnSpan="3" Grid.RowSpan="2">Button</Button>
<Button Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="17,6,3,0" Name="button3" Grid.Column="2">Button</Button>
</Grid>
</Grid>
</Window>
If I want to create a button control like that, is it supposed to be a User Control or a Custom Control? I am not sure maybe something else? Ideally I want to be able style/animate the main button and the inner button separately; also obviously Ill need to process their events separately. These buttons will be created at run-time and Ill need to set the icons dynamically.
I'd suggest a user control. You can still create your basic styling in xaml and use code for the dynamic stuff.
You'd basically have something like this:
<Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="" Grid.Column="0" />
<TextBlock Grid.Column="1">Your button text</TextBlock>
<Image Source="" Grid.Column="2"/>
</Grid>
</Button>