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.
Related
This question already has answers here:
WPF XAML: How to automatically scale down children of a component in XAML?
(2 answers)
Scale images in listview to fit
(1 answer)
Closed 5 years ago.
Does anyone know if I can scale down an existing DataTemplate? In other words, if I have a DataTemplate that displays a group of text-blocks, and images at a size of 300 by 300, can I scale down that DataTemplate to 50x50 to create a view without modifying the DataTemplate itself?
I have several DataTemplates for different elements that are displayed in the diagram. I would like to do a scale down (Preview) of these DataTemplate in order to display it to the user as a list or a group of them.
At the moment my only choice would be to scale it down manually to the preview size, but I was wondering if there is a function I can use to scale it down automatically.
Thanks in advance.
<DataTemplate x:Key="sElementLA">
<Border BorderThickness="1" BorderBrush="{Binding Path=Data.Held, Converter={StaticResource heldConverter}}"
Background="Transparent" x:Name="ElementIcon"
Width="Auto" Height="Auto"
TouchDown="touchDownHandler" TouchUp="touchUpHandler"
TouchMove ="touchMoveHandler" TouchLeave="touchLeaveHandler"
Stylus.IsPressAndHoldEnabled="False"
go:Node.Movable="False"
go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
go:Node.LocationSpot="TopLeft"
go:Part.SelectionAdorned="True"
go:Part.SelectionElementName="ElementIcon"
go:Part.SelectionAdornmentTemplate="{StaticResource NodeSelectionAdornmentTemplate}"
go:Part.Resizable="False"
go:Part.ResizeElementName="ElementIcon"
go:Part.ResizeAdornmentTemplate="{StaticResource NodeResizeAdornmentTemplate}"
go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}"
go:Part.Rotatable="False"
go:Part.DragOverSnapEnabled="True"
go:Part.DragOverSnapCellSpot="TopLeft"
go:Part.RotateAdornmentTemplate="{StaticResource NodeRotateAdornmentTemplate}">
<!--Element info-->
<Grid ShowGridLines="False" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="3" Width="300" Height="100" RadiusX="12" RadiusY="12"
StrokeThickness="1" Stroke="#5075ba" StrokeLineJoin="Round" StrokeStartLineCap="Round"
StrokeEndLineCap="Round" Fill="#bcc5d2"/>
<StackPanel Grid.Row="0" Grid.Column="0" Margin="30,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center">
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Medium"
FontSize="16px" Foreground="Black" HorizontalAlignment="Right" FontWeight="DemiBold"/>
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Regular"
FontSize="15px" Foreground="Black" HorizontalAlignment="Right"/>
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Regular"
FontSize="15px" Foreground="Black" HorizontalAlignment="Right"/>
</StackPanel>
<!--Element Node and Icon I-->
<Grid ShowGridLines="False" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.6*" />
<ColumnDefinition Width="0.4*"/>
</Grid.ColumnDefinitions>
<go:SpotPanel MouseEnter="Node_MouseEnter" MouseLeave="Node_MouseLeave" Grid.Column="0" >
<go:NodePanel Sizing="Fixed" go:SpotPanel.Main="True" >
<Rectangle Width="85" Height="85" x:Name="CB_VIcon" RadiusX="0" RadiusY="0" Stroke="Transparent" StrokeThickness="0"
Cursor="Hand" Fill="{StaticResource CB_V}" SnapsToDevicePixels="True">
</Rectangle>
</go:NodePanel>
</go:SpotPanel>
<Grid ShowGridLines="False" Grid.Column="1" VerticalAlignment="Center" Margin="0,0,4,0" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="CLD" Margin="0,22,4,0" Foreground="DarkGreen" FontSize="16"
TextWrapping="NoWrap" FontFamily="Comapany Inspira Medium" Height="Auto"
VerticalAlignment="Center" HorizontalAlignment="Center" />
<fa:ImaComapanyAwesome Grid.Row="1" VerticalAlignment="Top" Icon="InfoCircle" Height="30"
Foreground="#33cccc" Margin="0,0,4,-10" HorizontalAlignment="Center"/>
</Grid>
</Grid>
</Grid>
</Border>
</DataTemplate>
The easiest way would be wrap the template's container in a Viewbox. Viewbox will scale its contents to fit itself.
Since DataTemplate is usually used in an ItemsControl you may need to use a custom container to utilize a viewbox around the template.
I need to binding objects of the lists below in a ItemsControl binded in a ScrollViewer in wpf .
I Provand assigning a path but I still can not binding, maybe I'm wrong ? In the subject of the first level the bind is successful , but when I go down in the lists below of the same object bind will not work.
Xaml Scrollviewer:
<surface:SurfaceScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Hidden" Background="#fff" PanningMode="VerticalOnly">
<ItemsControl x:Name="scrollViewerFolderItemsSource" ItemsSource="{Binding Path=companies}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<surface:SurfaceButton Tag="{Binding CPID}" Click="Open_Click" Grid.ColumnSpan="2">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="0,1,0,0" BorderBrush="Gray" Height="57" Background="White">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#fff"></Grid>
<Image Grid.Row="0" Grid.Column="0" Width="32" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding ImageFolder}"></Image>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding CompanyName}" Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="10,3,0,0" Style="{DynamicResource Lato-Semibold}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding companies.Attachments.Name}" Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="10,3,0,0" Style="{DynamicResource Lato-Semibold}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding AttachmentFolders.Name}" Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="10,3,0,0" Style="{DynamicResource Lato-Semibold}"/>
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</surface:SurfaceButton>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</surface:SurfaceScrollViewer>
CodeBehind view list binded:
My target is binding Text="{Binding companies.Attachment.Name}"
If i print Text="{Binding Attachment}" my result print on deploy is "(Collection)", why print Attachment.Name ?
Attachments is a Collection, to visualize a collection you should use a ListBox and use this binding ItemsSource="{Binding companies.Attachment}", you also need to define the ItemTemplate for the ListBox.
With the ListBox you are able to visualize all the element, but if you want to show just the first attachment name you can use this binding Text="{Binding companies.Attachment[0].Name}"
or another solution could be to create a new property called AttachmentToShow of type Attachment and use this binding
Text="{Binding AttachmentToShow.Name}"
with this solution updating AttachmentToShow will result on an UI update.
how can i design following?
what i have tried so far :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="{Binding nexs}" Width="70" Height="70" Grid.Column="0"/>
<Grid Grid.Column="1" HorizontalAlignment="Left" >
<Image Source="{Binding url}" Height="{Binding height}" Width="{Binding width}"/>
</Grid>
<TextBlock Text="{Binding title}" TextWrapping="Wrap" Grid.Column="2" Margin="0,15,0,0" FontFamily="Lucida Console" Foreground="Black" />
</Grid>
is there anyway 2 to put rows inside columdefinations?
No. You can have columdefinations and rowdefinations. If you want multiple rows in a column then create another grid and set the row definitions on that grid.
Or, create rows and columns definitions on main grid and set row spans on controls to get the desired layout.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="{Binding nexs}" Width="70" Height="70" Grid.Column="0"/>
<Grid Grid.Column="1" HorizontalAlignment="Left" >
<Image Source="{Binding url}" Height="{Binding height}" Width="{Binding width}"/>
</Grid>
<TextBlock Text="{Binding title}" TextWrapping="Wrap" Grid.Column="2" Margin="0,15,0,0" FontFamily="Lucida Console" Foreground="Black" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- Place controls here -->
</Grid>
</Grid>
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'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?