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>
Related
I have to place an image on top right corner of grid. But it should not take the height of grid row. Means it should appear as a top layer of grid. How can I achieve this?
Doing like below, the height of grid row is increases as the height of image (Img_Data).
<Grid x:Name="LayoutRoot" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel x:Name="menu" Grid.Row="0" Grid.ColumnSpan="3" >
<Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Click="btnOpen_Click" Width="auto" Height="25"/>
<Button Margin="8" Width="100" Height="28" Content="Play" BorderBrush="Transparent" Name="btnPlay" Click="btnPlay_Click" Style="{StaticResource CommonButton}" >
</Button>
<Label x:Name="lblRecordTimer" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<Label x:Name="lblPlayMode" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
<Image Name="Img_Data" Source="/images/Data.png" HorizontalAlignment="Right" Width="187" Height="150" />
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Center">
<Label Content="Show Details" FontSize="18" Foreground="White" ></Label>
<fa:ImageAwesome Icon="Refresh" Foreground="Red" Visibility="Collapsed" Width="50" Height="50" x:Name="spinner1" Spin="True" SpinDuration="4" />
</StackPanel>
</Grid>
You can use Canvas as last child of your Grid. Like this:
<Grid x:Name="LayoutRoot" Background="Black" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel x:Name="menu" Grid.Row="0" Grid.ColumnSpan="3" >
<Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Width="auto" Height="25"/>
<Button Margin="8" Width="100" Height="28" Content="Play" BorderBrush="Transparent" Name="btnPlay">
</Button>
<Label x:Name="lblRecordTimer" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<Label x:Name="lblPlayMode" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Center">
<Label Content="Show Details" FontSize="18" Foreground="White" ></Label>
</StackPanel>
<Canvas
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="3">
<Image
Name="Img_Data"
Canvas.Top="16"
Canvas.Right="16"
Source="/images/Data.png"
Width="187"
Height="150"/>
</Canvas>
</Grid>
I'm new to WPF app developing and there is no such thing as RelativeLayout(Where I can arrange views relative to another view...like in Android).
My listview row Template looks like this.
Can someone help me with the code to design such template in XAML
EDIT : This is the code I've tried so far(Only for the first row i.e for name, time and date)...It doesn't seem to work.
<ListView x:Name="listView" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="752" Margin="20,282,0,0" VerticalAlignment="Top" Width="486" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
<!--<ColumnDefinition Width="120"/>-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Grid.Row="0" Grid.Column="1" FlowDirection="RightToLeft" Text="{Binding Time}" FontWeight="Bold" />
<!--<TextBlock Grid.Column="1" Background="Gainsboro" FlowDirection="LeftToRight" Text="{Binding Date}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The Time and Date appear beside each other. I thought using flow direction should help.
Try this :
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Time}" FontWeight="Bold" HorizontalAlignment="Right"/>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Header}" FontWeight="Bold" />
<TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Details}" FontWeight="Bold" />
</Grid>
</DataTemplate>
NOTE: Avoid some syntax error because I developed in notepad. It is not having any scrollbar as shown in image in your question. You can comment if any issue. You can apply text formatting and margin as per need.
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 big main grid with several rows and columns. I want to place in one of these cells a vertical stackpanel. In this stackpanel there is a textblock and a scrollviewer. My problem is, that the stackpanel doesn't get limited by the cell, instead the stackpanel gets big enough to fit the whole scrollviewer.
How can I solve this?
EDIT: my xaml code:
<Grid x:Name="Grid1" Margin="120,0,0,0" Width="1244">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="33*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="71"/>
<RowDefinition Height="40"/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="0">
<TextBlock TextWrapping="Wrap" FontSize="48" Margin="0" VerticalAlignment="Top" Foreground="#FF0083FF" Text="Top 10:" HorizontalAlignment="Left" FontFamily="Segoe UI Light"/>
<ScrollViewer Margin="0,20,0,0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
<StackPanel>
<ListView x:Name="TopListView" ItemsSource="{Binding}" SelectionMode="None" Foreground="White" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel >
<TextBlock FontSize="32" Text="1" Foreground="#FF0083FF"/>
</StackPanel>
<TextBlock Text="{Binding Text}" Foreground="Black"
FontSize="16" Margin="0,0,0,0" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Use another Grid instead of a StackPanel:
<Grid Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock FontSize="48" FontFamily="Segoe UI Light"
Foreground="#FF0083FF" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="Top 10:"/>
<ScrollViewer Grid.Row="1" Margin="0,20,0,0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
...
</ScrollViewer>
</Grid >
I have this DataTemplate in my ListBox:
<local:SearchTemplateSelector.VideoTemplate>
<DataTemplate>
<Grid>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Margin="0" HorizontalAlignment="Left" Source="{Binding Path=ImgUrl}" Width="100" Height="100" />
<Grid Grid.Column="1" Margin="10,0,8,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" FontSize="20" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<StackPanel Orientation="Horizontal" Margin="0,-5,0,0" Grid.Row="1">
<TextBlock Text="Views: " FontSize="20" Foreground="Black"/>
<TextBlock Text="{Binding ViewCount}" FontSize="20" Foreground="Black"/>
</StackPanel>
<TextBlock Text="{Binding TimeStr}" FontSize="20" Foreground="Black" Grid.Row="2" Margin="0,0,0,0" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.VideoTemplate>
Now i have Image that i binding from ImgUrl of my object.And i want to know if there is possibility to make something like this:
If the image is in the device take it from the device,if not download it and save it on the device for next time, every image have a unique id so i can just save it with id.png
If I understand you correct, you have to add logic to ImgUrl property. You have to add some method in Set{}, which will try load image from isolatedStorage, and catch exception, in which it will use method to load and save image to isolatedStorage.