I have a problem. I have listbox.ItemTemplate with Grid inside.
<ListBox x:Name="listBox" Foreground="Black" FontSize="23" Height="470">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,40" Height="80">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="stopName_TextBlock" Grid.Column="1" Text="{Binding Title}" Foreground="Black" FontSize="23"/>
<TextBlock x:Name="time_TextBlock" Grid.Column="2" Text="{Binding Time}" Foreground="Black" FontSize="23"/>
<Grid x:Name="firstGraphic" Visibility="Collapsed" Grid.Column="0">
<Rectangle Grid.Row="1" Height="40" Fill="#2575B0" Width="10" VerticalAlignment="Bottom"/>
<Ellipse Grid.Row="1" Fill="#2575B0" Height="20" Width="20"/>
</Grid>
<Grid x:Name="midleGraphic" Visibility="Collapsed" Grid.Column="0">
<Rectangle Height="80" Width="10" Fill="#2575B0"/>
<Rectangle Height="10" Width="30" Fill="#2575B0" HorizontalAlignment="Right" RadiusX="5" RadiusY="5"/>
</Grid>
<Grid x:Name="lastGraphic" Visibility="Collapsed" Grid.Column="0">
<Rectangle Grid.Row="2" Height="40" Fill="#2575B0" Width="10" VerticalAlignment="Top"/>
<Ellipse Grid.Row="2" Height="20" Width="20" Fill="#2575B0"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My listbox will have 20-25 items. First item will have firstGrahic Grid. Last item - lastGraphic Grid. And the others - midleGraphic Grid. I created all this Grids, but a dont know how I can find this Grids in C# code. I want change Visability property for them.
for (int i = 0; i < mainList.Count; i++)
{
listBox.Items.Add(mainList[i]);
if (i == 0)
{
Grid grid = (Grid)this.listBox.FindName("firstGraphic");
grid.Visibility = System.Windows.Visibility.Visible;
}
}
This example with first Item, but object grid = null.
Please help me.
As I can see your model contains properties Title and Time which are bound to TextBlocks. You can also add new propery to the model, for example:
public Visibility FirstGraphicVisibility { get; set; }
and bind it to the Grid Visibility, eg:
<Grid x:Name="firstGraphic" Visibility="{Binding FirstGraphicVisibility}" Grid.Column="0">
next just change FirstGraphicVisibility propery in your source list mainList and set ItemsSource of ListBox:
ListBox.ItemsSource = mainList;
Related
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.
this is my first post here, so be tolerant for any possible mistakes I made here ;)
I am building an App where I want to have a tab Layout. So I am currently using this code:
<Grid Margin="0,97,0,0" Height="50" VerticalAlignment="Top">
<ItemsControl Margin="0,0,0,0" x:Name="itemsControl" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding name}" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<FlipView x:Name="flipView" Margin="0,147,0,0" ItemsSource="{Binding groups}">
<FlipView.ItemTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding articles}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding category}"/>
<TextBlock Text="{Binding title}"/>
<Image Source="{Binding image}"></Image>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
I would like the Items to fill the width of the ItemsControl and be equally sized.
Thank You.
Luca
Edit:
Just to better explain what I want to archieve:
I want tabs looking like the "365 Steps", "News", "Event", "Archiv" tabs in the Picture
You can use Pivot to achive something like this:
In order to do this you can use this code:
<Grid x:Name="grid">
<Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="item1" Background="DarkBlue" Tapped="item1_Tapped"/>
<Grid Grid.Column="1" x:Name="item2" Background="Orange" Tapped="item2_Tapped"/>
<Grid Grid.Column="2" x:Name="item3" Background="DarkGray" Tapped="item3_Tapped"/>
</Grid>
<Pivot x:Name="rootPivot" IsHitTestVisible="False" Margin="0,52,0,0">
<PivotItem Margin="0">
<TextBlock Text="Content of pivot item 1."/>
</PivotItem>
<PivotItem Margin="0">
<TextBlock Text="Content of pivot item 2."/>
</PivotItem>
<PivotItem Margin="0">
<Grid Background="LightGray">
<TextBlock Text="Content of pivot item 3."/>
</Grid>
</PivotItem>
</Pivot>
</Grid>
item_Tapped() event handler:
private void item3_Tapped( object sender, TappedRoutedEventArgs e )
{
rootPivot.SelectedIndex = 2;
}
Take a look at a complete example on how to do this here: https://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/
Import parts are
<Setter Target="HeaderClipper.HorizontalContentAlignment" Value="Center" />
Setting the HorizontalContentAllignment to get the centering
Taking care of the incorrect default height of a pivot header! The
default template has 48 set as height and that would not be enough in
most cases!
The other answers with using Pivot are probably the direction you might go. If you wanted to play around a bit you could create your own, but you might sacrifice some ability to have what the Pivot offers you automatically.
I totally threw this together in like 5 minutes to demonstrate how you can create your own UI for what you want. I did not put in anything like bindings, optimize how the menu would use a single property and converter detect which highlight to show, etc.
XAML
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Tapped="OnTapped" Tag="0">
<TextBlock Text="365 Steps" HorizontalAlignment="Center" Margin="0,0,0,6"/>
<Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R0"/>
</Grid>
<Grid Grid.Column="1" Tapped="OnTapped" Tag="1">
<TextBlock Text="News" HorizontalAlignment="Center" Margin="0,0,0,6"/>
<Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R1" Visibility="Collapsed"/>
</Grid>
<Grid Grid.Column="2" Tapped="OnTapped" Tag="2">
<TextBlock Text="Event" HorizontalAlignment="Center" Margin="0,0,0,6"/>
<Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R2" Visibility="Collapsed"/>
</Grid>
<Grid Grid.Column="3" Tapped="OnTapped" Tag="3">
<TextBlock Text="Archive" HorizontalAlignment="Center" Margin="0,0,0,6"/>
<Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R3" Visibility="Collapsed"/>
</Grid>
</Grid>
<ListView Grid.Row="1" Name="MyList">
<ListBoxItem>Foo</ListBoxItem>
<ListBoxItem>Bar</ListBoxItem>
</ListView>
</Grid>
Code
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
R0.Visibility = Visibility.Visible;
R1.Visibility = Visibility.Collapsed;
R2.Visibility = Visibility.Collapsed;
R3.Visibility = Visibility.Collapsed;
}
private void OnTapped(object sender, TappedRoutedEventArgs e)
{
var grid = sender as Grid;
string tag = grid.Tag as string;
// do more stuff depending on tag
switch (int.Parse(tag))
{
case 0:
R0.Visibility = Visibility;
R1.Visibility = Visibility.Collapsed;
R2.Visibility = Visibility.Collapsed;
R3.Visibility = Visibility.Collapsed;
MyList.DataContext = null; // todo: SET TO YOUR DATA MODEL
break;
case 1:
R1.Visibility = Visibility;
R0.Visibility = Visibility.Collapsed;
R2.Visibility = Visibility.Collapsed;
R3.Visibility = Visibility.Collapsed;
break;
}
}
}
This is not meant as a complete solution, just a jump start on and idea you can inspire from. Depends on your project, intended audience, and many other factors for what design is best for your case.
I'm developing windows phone 8.1 app, and I need to get value of textboxes named:"time_tb" and "task_text_tb", that are in my selected item. This is my Xaml code:
<ListBox x:Name="list" ItemsSource="{Binding tasks}" Background="White" Margin="-1,50,-1,63">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="1" Height="76" Tapped="Grid_Tapped" Width="389">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="83*" />
<ColumnDefinition Width="307*" />
</Grid.ColumnDefinitions>
<TextBox x:Name="time_tb" Margin="0,15,276,0" TextWrapping="Wrap" Text="{Binding time}" VerticalAlignment="Top" BorderBrush="#FF49B7DC" Width="83" Height="45" FontSize="18.667" Foreground="{x:Null}" Background="White" FontFamily="Segoe UI Emoji" IsReadOnly="True" TextAlignment="Center" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="task_text_tb" Margin="63,14,10,39.833" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{Binding wht}" FontSize="16" SelectionHighlightColor="#FF1455B3" Grid.RowSpan="2" />
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<StackPanel Height="100" Width="100"/>
</ListBox>
In your viewmodel, keep a property for the SelectedItem (binded to your list selectedItem) and 2 property for the textboxes of the current selected item that you will update when SelectedItem is changed. Then bind those 2 properties to where you want to show the values.
You may have to do some magic to find the actual selected item, because i think selected item only returns an index or something...
Hope this helps
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.
I have a ListBox bound to some data, all with an ItemTemplate set, I want to fire PointerPressed Event from this list by pressing anywhere in the ListBox area (cause I just need that for some purpose), but apparently the Selection of the items is preventing that, (I'm using commands) here's my code
<ScrollViewer x:Name="sv"
x:FieldModifier="public"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Disabled"
HorizontalScrollMode="Disabled">
<ListBox x:Name="lb"
ItemsSource="{Binding Path=Tweets}">
<WinRTBehaviors:Interaction.Behaviors>
<Win8LnBehaviors:EventToCommandBehavior Event="PointerPressed"
Command="svPointerPressed"
PassEventArgsToCommand="True" />
</WinRTBehaviors:Interaction.Behaviors>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="65">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="Img_ProfilePicture"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
Stretch="Fill"
Source="{Binding ProfilePictureSource}"
Margin="2">
</Image>
<TextBlock x:Name="Tb_ProfileName"
Grid.Row="0"
Grid.Column="1"
Text="{Binding UserName}"
Margin="5,0,0,0"
FontFamily="Segoe UI Mono"
FontSize="12"
FontWeight="Bold" />
<TextBlock x:Name="Tb_FeedTime"
Grid.Row="0"
Grid.Column="2"
Text="{Binding StatusDateTime}"
Margin="5,0,0,0"
FontFamily="Segoe UI Light"
FontSize="10" />
<TextBlock x:Name="Tb_FeedData"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Text="{Binding Status}"
Margin="10,0,0,0"
FontFamily="Wasco Sans"
TextWrapping="Wrap">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
The code behind :
public RelayCommand<RoutedEventArgs> svPointerPressed
{
get
{
return new RelayCommand<RoutedEventArgs>((routedEventArgs) =>
{
_dispatcher = Window.Current.Dispatcher;
_dispatcher.RunAsync(CoreDispatcherPriority.High, () =>
{
MessageDialog m = new MessageDialog("Tapped !");
m.ShowAsync();
});
});
}
private set{}
}
I even tried to fire the PointerPressed event from one of the components like those TextBoxes but still not firing.
I'd be so thankful , thx
I'd go and just give up at this point. A ScrollViewer filters out pointer events and you will be better off figuring out an alternative design.