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.
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.
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I'm working on a control for my WPF application in which I want a Button inside of a TextBox. The Button will contain an image that changes with a mouseover, but I already know how to do that part. What I'm having trouble with is actually including the Button in the TextBox so that it only takes up as much space as the image and is transparent. Below is the markup that I've tried so far:
XAML:
<Grid>
<TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" Margin="5, 5, 10, 5" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
<Button Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<Button.Content>
<Image Source="Image.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button.Content>
</Button>
</Grid>
I've followed along with this question: How to implement a textbox with a clear button in wpf?, which also linked to this article: WPF Search Text Box. The XAML suggested in the question didn't work, which I think is because of the Style they use, which I don't have access to. The article provided too much information, mostly talking about the triggers and dependency properties needed in order to swap out searching and deleting icons on mouseovers. So, I'm asking for help finding a simple solution on how to make this happen. Thank you!
EDIT: I've followed the advice of the answers, and I'm able to style the button correctly, but it won't show up in the textbox still, and if it does, the text still runs underneath it. I've included the XAML and a picture of what's happening:
XAML:
<Grid Margin="5, 5, 10, 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
<Button Background="{Binding Backgound, ElementName=SearchBoxView}" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Click="SearchBoxViewButtonClick" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Image.png" Width="12" Height="12"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
Image:
Specify Button template, instead of content
<Button>
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
EDIT
BTW, in your case the image will cover TextBox and entered text. I would recommend to put this controls in the different columns of the grid like bellow
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchBoxView"
HorizontalAlignment="Right"
Width="200" Margin="5, 5, 10, 5"
FontSize="16"
KeyUp="SearchBoxKeyDown"
Text="{Binding SearchText, Mode=TwoWay}"
Grid.Column="0"/>
<Button
Grid.Column="1"
Background="Transparent"
HorizontalAlignment="Right"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
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.
Kind of new to Silverlight, how can I make a grid 3d-looking (kind of like how the Silverlight progress bar visually stands out). I feel like I have tried everything but I have ran out of ideas. Could anyone give me a code snippet that can do this?
Have you tried using the DropShadowEffect?
<data:DataGrid>
<data:DataGrid.Effect>
<DropShadowEffect />
</data:DataGrid.Effect>
...
...
</data:DataGrid>
You can use this on other controls as well of course.
Creating a sunken effect is all about the illusion of lighting. If you draw a border around the element with a dark color on the top and left and lighter color on the bottom and right you get the impression that the content has been sunk into the surface. Switching the shade will give the effect of the content being raised.
Here is a small example to demonstrate
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" >
<Grid x:Name="LayoutRoot" Background="Lightgray">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Grid.Column="1" Orientation="Vertical">
<!-- Sunken -->
<Grid Width="100" Height="25" Background="Wheat" Margin="0,5,0,0">
<!-- Draw the 3d border -->
<Rectangle Height="1" Fill="DarkGray" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<Rectangle Width="1" Fill="DarkGray" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
<Rectangle Height="1" Fill="White" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<Rectangle Width="1" Fill="White" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
<!-- Put your content in this Grid -->
<Grid>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Sunken" />
</Grid>
</Grid>
<!-- Raised -->
<Grid Width="100" Height="25" Background="Wheat" Margin="0,5,0,0">
<!-- Draw the 3d border -->
<Rectangle Height="1" Fill="White" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<Rectangle Width="1" Fill="White" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
<Rectangle Height="1" Fill="DarkGray" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<Rectangle Width="1" Fill="DarkGray" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
<!-- Put your content in this Grid -->
<Grid>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Raised" />
</Grid>
</Grid>
</StackPanel>
</Grid>
</UserControl>