I have grid view in windows phone xaml page and this grid contains many UI element like buttons, checkboxes and textboxes. I want to search some specific UIElement by name from that grid and want to get value of that UIElement and set some new values as well. How I can get that UIElement from that grid with Visual Tree helper in code behind.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="240" />
<ColumnDefinition Width="240" />
</Grid.ColumnDefinitions>
<Border BorderThickness="2" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Name="Border1">
<Image Width="110" Height="110" Stretch="Fill" Name="Image1" Tap="Image1_Tap" />
</Border>
<Border BorderThickness="2" BorderBrush="Transparent" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Name="Border2">
<Image Width="110" Height="110" Stretch="Fill" Name="Image2" Tap="Image2_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="0" Name="Border3">
<Image Width="110" Height="110" Stretch="Fill" Name="Image3" Tap="Image3_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="0" Name="Border4">
<Image Width="110" Height="110" Stretch="Fill" Name="Image4" Tap="Image4_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Left" Grid.Row="5" Grid.Column="0" Name="Border5">
<Image Width="110" Height="110" Stretch="Fill" Name="Image5" Tap="Image5_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" Name="Border11">
<Image Width="110" Height="110" Stretch="Fill" Name="Image11" Tap="Image11_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Name="Border22">
<Image Width="110" Height="110" Stretch="Fill" Name="Image22" Tap="Image22_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="1" Name="Border33">
<Image Width="110" Height="110" Stretch="Fill" Name="Image33" Tap="Image33_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="1" Name="Border44">
<Image Width="110" Height="110" Stretch="Fill" Name="Image44" Tap="Image44_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="5" Grid.Column="1" Name="Border55">
<Image Width="110" Height="110" Stretch="Fill" Name="Image55" Tap="Image55_Tap" />
</Border>
</Grid>
I want to match options. Lets Say Left Side Some Images Are Clicked And Its Border Changed And Once On Right SIde Clicked Which Option is Matched Either Left SIde Have Some Selection or Not
Can you tell me what exactly you want to get from the grid elements, because there are only Borders and Images inside. You can find elements via this generic coding. (ContentPanel is your grid name), You can get the Border and Image and other controls name and other properties as well on the following procedure.
foreach (var child in ContentPanel.Children)
{
if (child is Border)
{
var borderName = (child as Border).Name;
// if you wana get the image inside border, then do this.
var getBorderChlid = (item as Border).Child;
if (getBorderChlid is Image)
{
var getImgName = (getBorderChlid as Image).Name;
}
}
}
If this help you then well and good, otherwise explain your quest a bit more, then I will send you the exact code InshaAllah.
Related
I have a UserControl which contains a button CollapseConsoleBtn:
<UserControl //namespaces
<Grid
Name="LoggingGrid"
Height="100"
Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="0"
Margin="5,0,0,0"
Orientation="Horizontal">
<Button
x:Name="CollapseBtn"
Width="25"
Height="25"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Click="CollapseBtn_Click"
Content="▼"
FontSize="12">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Image
Height="25"
Margin="7,0,0,0"
Source="/Images/console-icon.png"
Visibility="Visible" />
<Label
Margin="2,0,0,0"
Content="Console"
FontSize="16"
Foreground="White" />
</StackPanel>
</Grid>
</UserControl>
My problem here is that I want to make the button smaller - for example with Height 20 and Width 20. I can change the width, but apparently, the height is fixed to be 25. Even if I set it to 15, it remains the same size.
Has anyone encountered this problem?
I think trouble is in <TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}"> (you put Button and StackPanel there).
I tried to removed it, a bit played with margins and paddings, setted a size of button 16x16 (MinWidth & MinHeight properties) and get this result:
UserControl XAML:
<Grid Name="LoggingGrid"
Height="100"
Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="26" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button x:Name="CollapseButton"
Click="CollapseBtn_Click"
MinWidth="16"
MinHeight="16"
Margin="2,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Grid.Row="0"
Content="▼">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<StackPanel Margin="5,0,0,0"
Orientation="Horizontal">
<Image Height="25"
Visibility="Visible" />
<Label Margin="18,0,0,0"
Content="Console"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Padding="0,0,0,2"
FontSize="16"
Foreground="White" />
</StackPanel>
</Grid>
What you can do is:
Set the button's MinHeight instead of Height.
Make sure that the button's HorizontalAlignment and VerticalAlignment are set as their default value is Stretch.
I've attempted to use the index to set the red ellipse on top of the blue background but no matter what i changed it didn't affect its placement. How can i make it so the red dots appear in-front/on-top of the blue rectangle?
<Grid.RowDefinitions>
<RowDefinition Height="8"/>
<RowDefinition Height="*"/>
<RowDefinition Height="8"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
Cursor="Hand"
Background="LightBlue"
CornerRadius="4"
Panel.ZIndex="0"
Padding="10,0,10,0">
<Grid>
<Rectangle HorizontalAlignment="Center"
Height="30"
MinWidth="100"
Panel.ZIndex="5"/>
<Label Content="{Binding VirtualName}" HorizontalContentAlignment="Center"/>
</Grid>
</Border>
<Ellipse Stroke="White" StrokeThickness="2" Fill="Red" Height="16" Width="16"
Grid.Row="2" Grid.Column="1" Margin="0,-8,0,0"
Panel.ZIndex="50"/>
<Ellipse Stroke="White" StrokeThickness="2" Fill="Red" Height="16" Width="16"
Grid.Row="0" Grid.Column="1" Margin="0,0,0,0"
Panel.ZIndex="50"/>
</Grid>
Just use grid without any rows and add margin to the border which is the first element on the grid. Place the ellipses with VerticalAlignment to top and bottom and they will be rendered on top of the border.
<Grid>
<Border Cursor="Hand"
Background="LightBlue"
CornerRadius="4"
Margin="0 8"
Padding="10,0,10,0">
<Grid>
<Rectangle HorizontalAlignment="Center" Height="30" MinWidth="100" />
<Label Content="{Binding VirtualName}" HorizontalContentAlignment="Center"/>
</Grid>
</Border>
<Ellipse VerticalAlignment="Top" Stroke="White" StrokeThickness="2" Fill="Red" Height="16" Width="16"/>
<Ellipse VerticalAlignment="Bottom" Stroke="White" StrokeThickness="2" Fill="Red" Height="16" Width="16"/>
</Grid>
You can get rid of your Canvas.ZIndex properties. They do appear on top based on the order you've placed them in the grid, so the z indices aren't going to affect anything.
The issue here is that the bottom ellipse gets clipped because it's in a row of height 8. Try setting its margin to 0,0,0,-8, and you'll get your desired behavior.
I am creating a program to tell the user his account balance and stuff like that. I show this information on a Grid with a ViewBox (so it can be resized to any screen resolution) the problem is that the ViewBox does not fills its space at the Grid. Here is my code:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<TextBlock Foreground="#5a5a5a" TextAlignment="Center" Margin="1">Subtotal</TextBlock>
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="2" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBox Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<TextBlock Foreground="#5a5a5a" TextAlignment="Center" Margin="1">Descuentos</TextBlock>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="2" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBox Margin="5" Text="0.0" TextAlignment="Center"/>
</Viewbox>
</Grid>
Here is the result:
As you can see the "discount" TextBox is smaller than the above, and i need them to have the same width and height. How can i achieve this? I am putting everything inside a ViewBox to make the resize for me, but is it right? i already tried several methos like this one, but it makes the text really small.
You don't need the Viewboxes at all:
<TextBlock Grid.Row="0" Grid.Column="1" Foreground="#5a5a5a" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextAlignment="Center" Margin="1">Subtotal</TextBlock>
<TextBox Grid.Row="0" Grid.Column="2" Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
<TextBlock Grid.Row="1" Grid.Column="1" Foreground="#5a5a5a" TextAlignment="Center" Margin="1">Descuentos</TextBlock>
<TextBox Grid.Row="1" Grid.Column="2" Margin="5" Text="0.0" TextAlignment="Center"/>
Works just fine on my machine, no matter how I resize it.
If you need to keep the Viewboxes you can force your Textboxes to be the same size using Bindings
<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform" >
<TextBlock Foreground="#5a5a5a" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextAlignment="Center" Margin="1">Subtotal</TextBlock>
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="2" Stretch="Uniform" >
<TextBox x:Name="SubtotalBox" Grid.Row="0" Grid.Column="2" Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1" Stretch="Uniform" >
<TextBlock Grid.Row="1" Grid.Column="1" Foreground="#5a5a5a" TextAlignment="Center" Margin="1">Descuentos</TextBlock>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="2" Stretch="Uniform" >
<TextBox Grid.Row="1" Grid.Column="2" Margin="5" Text="0.0" MaxLength="6" Height="{Binding ElementName=SubtotalBox, Path=ActualHeight}" Width="{Binding ElementName=SubtotalBox, Path=ActualWidth}" TextAlignment="Center"/>
</Viewbox>
This binds the Width and Height of the second Textbox to the same as the first, keeping it consistent and forcing the Viewbox to size up to accommodate the bigger TextBox.
I want to make the size of an ellipse relative to its holding grids Column and Row size.
So, the size of the ellipses should change relative to the size of the page (device) of the given hardware..
Something like 'Inherit' from css.
Is this possible?
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Ellipse Fill="DarkGray" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="200" />
<Ellipse Fill="DarkGray" Height="200" Width="200" Grid.Row="2" Grid.Column="1" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Ellipse Fill="DarkGray" Height="200" Width="200" Grid.Row="2" Grid.Column="2" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
Use ViewBox for this purpose. For example, replace the 3rd Ellipse with the following code. It will grows/shrinks with the containing Grid.
<Viewbox Grid.Row="2" Grid.Column="2">
<Ellipse Fill="DarkGray" Height="200" Width="200" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Viewbox>
I have a listbox which I can successfully update with the data but now I want to access two specific textblocks which I want to collapse and make the other visible. here is my xaml:
<ListBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Name="myPM_MListBox" Margin="-5,0,-5,0" SelectionChanged="myPMListBox_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Background="#FF009E49" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" Text="Message Date" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFFFFFFF" FontWeight="Normal" />
</Border>
<Border Grid.Row="0" Grid.Column="1" Margin="0,0,5,0" Background="#FFEFEFEF" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PMMessagePubDate" Text="{Binding shdMsgPublishTime}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,1,1,0" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MLimitedBody" Text="{Binding shdMessageText}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,0,1,1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MFullBody" Text="Show more..." FontSize="16" HorizontalAlignment="right" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Blue" FontWeight="Normal" Tapped="ShowFullBody_Tap" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to hide PM_MLimitedBody textblock and show the PM_MFullBody textblock for the ShowFullBody_Tap event handler I have. But seems like I can't access the Visibility properties of these textblok in my .cs file. is there a way for me to access these textblock's visibility property in my .cs file?
You can use the sender of ShowFullBody_Tap will be the TextBox that defines that event. You can then use VisualTreeHelper.GetParent(...) to get the Border and then the Grid and then look at Grid.Children to find the other borders with their textboxes.