I've got a few ListBoxItems that have an image and a textbox in them which highlights when clicked. What I'm having trouble figuring out is how to make whole listbox item doubleclick event fire to a hyperlink. Can someone assist me in this?
I've been looking at this but it seems that it is for the listbox as a whole rather than an item -- http://jarloo.com/code/wpf/wpf-listbox-doubleclick/.
Here is one of my listboxitems:
<ListBoxItem >
<Grid HorizontalAlignment="Stretch">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.RowSpan="2"
BorderBrush="LightGray" BorderThickness="0"
Margin="0,0,5,0">
<Image Source="/IDE;component/Resources/Images/test1.ico" Height="64" Width="64" />
</Border>
<TextBlock Text="Google.com"
FontWeight="Bold"
Grid.Column="2"
Margin="0,0,0,5"/>
<TextBlock TextWrapping="Wrap" Text="To learn more information doubleclick this box to open the website."
Grid.Column="2" Grid.Row="2"/>
</Grid>
<Line X1="0" Y1="0" X2="0" Y2="0" Stretch="Uniform"
Stroke="DarkGray"
VerticalAlignment="Bottom"/>
</Grid>
</ListBoxItem>
You seem to be specifying concrete items rather than having them generated from an ItemsSource, the link you named does not apply. I don't quite understand what you mean when you refer to a Hyperlink since i cannot see any in your code.
To handle a normal double click you could assign a handler in the ListBoxItem itself:
<ListBoxItem MouseDoubleClick="ListBoxItem_DoubleClick">
...
Is that what you want?
Related
In the textboxes from the code below, the blinking cursor doesn't show even after i click the textbox or when it has focus.I'm posting this big a code because i think perhaps it's the parent element properties that are somehow interfering with the texboxes but I can't seem to find a solution for this. Can someone please help.
<Canvas Name="encounterTab" Style="{StaticResource canvasRecording}" Visibility="Hidden" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" FocusManager.IsFocusScope="True">
<Grid Height="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenHeightKey}}" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" Margin="0,0,0,0" FocusManager.IsFocusScope="True">
<DockPanel Style="{StaticResource screenTitleDock}" Grid.Row="0" VerticalAlignment="Top" >
<TextBlock Name="textBlock1" Style="{StaticResource screenTitle}">ENCOUNTER DETAILS</TextBlock>
</DockPanel>
<Grid Style="{StaticResource gridRecording}" SizeChanged="MainGrid_SizeChanged" Name="gridEncDetails" FocusManager.IsFocusScope="True">
<Grid.LayoutTransform>
<ScaleTransform
CenterX="0"
CenterY="0"
ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
</Grid.LayoutTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="188*"></ColumnDefinition>
<ColumnDefinition Width="149*"></ColumnDefinition>
<ColumnDefinition Width="63*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="lblApptTime" Content="Time:" Grid.Column="0" Grid.Row="0" />
<TextBox x:Name="txtTime" GotKeyboardFocus="txtApptTimeKeyBoadFocus" GotMouseCapture="txtApptTime_MouseClick" Grid.Column="1" Grid.Row="0" Width="149" LostFocus="txtApptTime_LostFocus" HorizontalAlignment="Left" MouseDoubleClick="txtApptTime_MouseDoubleClick" Margin="0,11" Height="38" GotTouchCapture="txtApptTime_GotTouchCapture" />
<ComboBox x:Name="ddlAmPm" VerticalContentAlignment="Center" Grid.Row="0" Grid.Column="2" Width="55" IsSynchronizedWithCurrentItem="True" Margin="0,10" HorizontalAlignment="Right" Height="38">
<ComboBoxItem>AM</ComboBoxItem>
<ComboBoxItem>PM</ComboBoxItem>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid >
<TextBlock Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Label x:Name="lblNo" Content="No:" Grid.Column="0" Grid.Row="1" Margin="0,11" Height="38" />
<TextBox x:Name="txtEncounterNumber" Grid.Column="1" Grid.Row="1" KeyDown="txtEncounterNumber_KeyUp" TextChanged="txtEncounterNumber_TextChanged" HorizontalAlignment="Left" Width="212" Margin="0,10" Grid.ColumnSpan="2" Height="Auto" />
<Button x:Name="btnNext1" Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource btnRec}" Click="btnNext1_Click" TouchUp="btnTouchNext1_Click" Margin="50,20,50,10" >
<Image Source="Assets/btnNext.png" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Canvas >
Note:- When i start typing the caret appears but disappears when i clear the textbox values.
It looks like you problem might comes from the ScaleTransform. If a TextBox is scaled to less then it's original size it's cursor disappears. This happens because the TextBox caret is with Width of 1 and when scaled down it becomes less then 1. So it's not visualized at all.
As a workaround make the minimal possible size as default so UI is only scaled up.
Another workaround it to create a custom caret like it's shown here WPF TextBox Inside ViewBox loses Cursor on resize
I want to make a popup which has a person's details on it. Each detail will be stacked vertically in the popup. I have two questions.
(1) How should I deal (graphically) with details which are not available?
(2) How to make the container around all the details dynamic so that its height is determined by the number of details available.
My first thought was the following;
<StackPanel Width="400"
Height="500">
<StackPanel x:Name="sp">
<Grid x:Name="spTelephone" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="1"
Margin="5,0,0,0">
<TextBlock Text="+Some Phone No."
VerticalAlignment="Center"
FontFamily="Verdana"/>
</Grid>
<Grid Grid.Column="2">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="3">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
</Grid>
<Grid x:Name="spMobile" Height="50">
<!-- Repeat of above -->
</Grid>
<Grid x:Name="spEmail" Height="50">
<!-- Repeat of above -->
</Grid>
<!-- Further Grids -->
</StackPanel>
</StackPanel>
The idea being that if a detail is not available then I would set the Visibility property of the GRID to Visibility.Collapsed.
For example see my image with 3 details.
Then if a cell phone is not available it would look like this.
So how should I do this? I could for imagine using a ListView as well maybe as this would then take away the need to collapse the views. I could add each detail to an Item. But then how do I get the list view and its parent to resize its height?
Define datatemplate for item and use any items control to represent them.
Simple solution would be something like this:
Template
<DataTemplate x:Key="MyItemTemplate">
<Grid x:Name="spTelephone" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="1"
Margin="5,0,0,0">
<TextBlock Text="+Some Phone No."
VerticalAlignment="Center"
FontFamily="Verdana"/>
</Grid>
<Grid Grid.Column="2">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="3">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
</Grid>
</DataTemplate>
Control
<Border BorderBrush="Black" BorderThickness="2" VerticalAlignment="Center" HorizontalAlignment="Center">
<ItemsControl ItemsSource="{Binding ItemsCollection}"
ItemTemplate="{StaticResource MyItemTemplate}"/>
</Border>
Of course you must fill collection from dataContext and for Text="+Some Phone No." also use data binding from current collection item.(Use DataContext={Binding} in template)
Border here is just to show that ItemsControl size changes according to collection-items count. Also ItemsControl can be replaced with any of it's descendants.
I want to change the alignment of my dockPanel, and I'm having some trouble. I'm relatively new to WPF, so that may explain it.
Anyways, here is the current layout:
<theme:bottomPanel DockPanel.Dock="Bottom" x:Name="bottomPanel" ClipToBounds="False" SnapsToDevicePixels="False" HorizontalAlignment="Center" Height="145" />
<theme:rightPanel DockPanel.Dock="Right" x:Name="rightPanel" ClipToBounds="False" SnapsToDevicePixels="False"/>
<theme:leftPanel DockPanel.Dock="Left" x:Name="leftPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
<theme:MapPanel DockPanel.Dock="Top" x:Name="mapPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
Visualized in Paint (lol) :
I would like to change the layout to something like the following:
Is this possible? If so, what approach would you recommend? Any guidance would be helpful! Thank you.
As an aside: is there any application that allows me to see my application layout as the app runs (i.e. add gridlines to each panel or something)?
Anyways, thanks!
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="Gray" Grid.ColumnSpan="3">
<TextBlock Text="Top Area"/>
</Border>
<Border Background="Magenta" Grid.Row="1" Height="200">
<TextBlock Text="Left Area"/>
</Border>
<Border Background="Red" Grid.Row="1" Grid.Column="1" Height="200">
<TextBlock Text="Bottom Area"/>
</Border>
<Border Background="Cyan" Grid.Column="2" Grid.RowSpan="2" Margin="0,200,0,0" Width="200">
<TextBlock Text="Right Area"/>
</Border>
</Grid>
I'm trying to put a <Border/> around a <Grid/> in a page, however the border appears to be bordering the page rather than the grid.
This is only XAML in my page element.
<Border Background="Black">
<Grid Background="{ThemeResource ControlBackgroundBrush}" x:Name="LoginCredentials" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Username:" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right" Margin="5"/>
<TextBox x:Name="UserName" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" Grid.Row="0" Grid.Column="1" TextChanged="UserChange" Margin="5"/>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click" Grid.Row="2" HorizontalAlignment="Right" Margin="5" TabIndex="0"/>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
As a test I created a resource to fill the background of the <Grid/> with a colour and also filled the background of the <Border/> with a different colour. The <Grid/> ends up as a box in the center of the screen as intended, but the border <Border/> fills the entire screen. Can anyone tell me why this happens and how to get the <Border/> to fit around the <Grid/> as I want?
Got it!
<Border Background="Black" VerticalAlignment="Center" HorizontalAlignment="Center">
....
</Border>
As soon as i posted the question, what i was missing became clear!
Is there a way to bind directly to an element object itself.
I am currently showing and hiding elements, but I would prefer to remove them entirely as they will never need to be used.
Is there a way to do a databinding to an element and then just remove it if required for that specific item?
for example, let's say I have participants in a conversation, ==1, ==2 or >3
<Border Visibility="{Binding ParticipantImagesOneVisibility}" Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding Participants[0].image.thumbnail_link}" Width="62" Height="62" Stretch="UniformToFill"/>
</Border>
<Border Visibility="{Binding ParticipantImagesTwoVisibility}" Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="31" />
<ColumnDefinition Width="31"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Participants[0].image.thumbnail_link}" Width="31" Height="62" Stretch="Fill"/>
<Image Grid.Column="1" Source="{Binding Participants[1].image.thumbnail_link}" Width="31" Height="62" Stretch="Fill"/>
</Grid>
</Border>
<Border Visibility="{Binding ParticipantImagesThreeVisibility}" Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Grid Width="62" Height="62">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="31" />
<ColumnDefinition Width="31"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="31" />
<RowDefinition Height="31"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Source="{Binding Participants[0].image.thumbnail_link}" Width="31" Height="31" Stretch="Fill"/>
<Image Grid.Column="0" Grid.Row="1" Source="{Binding Participants[1].image.thumbnail_link}" Width="31" Height="31" Stretch="Fill"/>
<Image Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Source="{Binding Participants[2].image.thumbnail_link}" Width="31" Height="62" Stretch="Fill"/>
</Grid>
</Border>
Instead of just hiding them (which is daymmmmm slow maynnnnnn), is there a way of either generating them on the fly (ive never used a custom control) or just removing them as I come to them?
I'm specifically talking about:
{Binding ParticipantImagesOneVisibility} etc.
I would use an ItemsControl, ListBox, or ListView. Use a DataTemplate for the items. Now you bind the ItemsSource to an ObservableCollection of all these participants.
Now, in your business layer, you have the participants and the list of them. If a participant drops off, the participant should be removed from the ObservableCollection. The UI will auto update because it is an ObservableCollection. Similar if a participant is added.