I have the following layou:
<s:SurfaceWindow x:Class="Prototype_Concept_2.SurfaceWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
Title="Prototype_Concept_2"
>
<s:SurfaceWindow.Resources>
<ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
</s:SurfaceWindow.Resources>
<Grid Background="{StaticResource WindowBackground}" >
<Grid Name="ProjectsGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox Name="ProjectsHeader" Grid.ColumnSpan="2" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="25" Text="Please choose one of the following projects" Grid.Row="0"></TextBox>
<s:SurfaceButton Name="BottomButton" HorizontalAlignment="Right" FontSize="20" Width="100" Grid.Column="1" Grid.Row="2" Foreground="White" Content="Refresh"></s:SurfaceButton>
<s:SurfaceListBox Background="Black" Grid.ColumnSpan="2" Name="ProjectsList" Grid.Row="1" ItemsSource="{Binding Projects}"></s:SurfaceListBox>
<Label Name="ProjectsFooter" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" FontSize="15" Content="Fetching projects data ..."></Label>
</Grid>
<Grid ShowGridLines="True" Name="SmellHeader" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="256"></ColumnDefinition>
<ColumnDefinition Width="256"></ColumnDefinition>
<ColumnDefinition Width="256"></ColumnDefinition>
<ColumnDefinition Width="256"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="38"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="Black"></Rectangle>
<Viewbox Grid.Column="0" Grid.Row="0" s:Contacts.PreviewContactDown="BrainClass_PreviewContactDown">
<Label Background="Black" Foreground="White" Content="BrainClass" HorizontalContentAlignment="Center"></Label>
</Viewbox>
<Rectangle Grid.Column="1" Grid.Row="0" Fill="Black"></Rectangle>
<Viewbox Grid.Column="1" Grid.Row="0">
<Label Background="Black" Foreground="White" Content="God Class" HorizontalContentAlignment="Center"></Label>
</Viewbox>
<Rectangle Grid.Column="2" Grid.Row="0" Fill="Black"></Rectangle>
<Viewbox Grid.Column="2" Grid.Row="0">
<Label Background="Black" Foreground="White" Content="Tradition Breaker" HorizontalContentAlignment="Center"></Label>
</Viewbox>
<Rectangle Grid.Column="3" Grid.Row="0" Fill="Black"></Rectangle>
<Viewbox Grid.Column="3" Grid.Row="0">
<Label Background="Black" Foreground="White" Content="RefusedParent Bequest" HorizontalContentAlignment="Center"></Label>
</Viewbox>
</Grid>
<Canvas Name="RootLayer" Grid.Row="1" Grid.ColumnSpan="4">
</Canvas>
</Grid>
</s:SurfaceWindow>
To the RootLayer I add some Ellipse. Later I want to reoder them:
internal void setFocus(SourceManager manager)
{
Console.WriteLine("Set focus to class " + getFullName());
foreach (SourceFile sf in manager.getBrainClasses())
{
sf.getVisualizer().Fill = Brushes.Red;
Canvas.SetZIndex(sf.getVisualizer(), 0);
}
this.getVisualizer().Fill = Brushes.Blue;
Canvas.SetZIndex(this.getVisualizer(), 1);
manager.window.RootLayer.InvalidateArrange();
manager.window.RootLayer.InvalidateVisual();
}
The Ellipse is referenced by this.getVisualizer();
However, nothing changes? How can I bring one Ellipse to the front?
It's not fully clear from your code post how the ellipses are added to the canvas but here is a small sample that does essentially what you want to do:
<Grid>
<Canvas x:Name="RootLayer" Width="500" Height="500" />
</Grid>
And in the constructor of the code behind, create some ellipses:
for (int i = 0; i < 10; i++)
{
Ellipse e = new Ellipse
{
Width = 100,
Height = 100,
Fill = new SolidColorBrush(
Color.FromArgb(0xDD,
(Byte) r.Next(255)
(Byte) r.Next(255)
(Byte) r.Next(255))),
Stroke = Brushes.Black,
StrokeThickness = 1,
};
e.MouseUp += new MouseButtonEventHandler(e_MouseUp);
Canvas.SetLeft(e, r.Next(400));
Canvas.SetTop(e, r.Next(400));
RootLayer.Children.Add(e);
}
Event handler to handle mouse click on the ellipses
void e_MouseUp(object sender, MouseButtonEventArgs e)
{
foreach (UIElement item in RootLayer.Children)
Panel.SetZIndex(item, 0);
Panel.SetZIndex((UIElement)sender, 1);
}
With the code above, whenever an ellipse is clicked (mouse up), it will raise above all the other ellipses in that canvas.
Related
I have following WPF XAML file,
<Window x:Class="Program"
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"
xmlns:local="clr-namespace:Program"
mc:Ignorable="d"
Title="Print Preview" Height="40820.962" Width="2135.146">
<Grid Margin="10,10,2,-21" Height="40801" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="131*"/>
<RowDefinition Height="40670*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Left" Height="3438" Margin="20,126,0,0" VerticalAlignment="Top" Width="2095" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*"/>
<ColumnDefinition Width="1072*"/>
<ColumnDefinition Width="523*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label5" Content="Here" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-7.455,-0.374" Height="58" Width="171" FontSize="16"/>
</Grid>
<Grid HorizontalAlignment="Right" Height="432" Margin="0,3453,1605,0" Grid.Row="1" VerticalAlignment="Top" Width="490" RenderTransformOrigin="0.62,1.205">
<Grid.RowDefinitions>
<RowDefinition Height="143*"/>
<RowDefinition Height="136*"/>
<RowDefinition Height="153*"/>
</Grid.RowDefinitions>
</Grid>
<Grid HorizontalAlignment="Right" Height="452" Margin="0,3433,1605,0" Grid.Row="1" VerticalAlignment="Top" Width="490" RenderTransformOrigin="0.62,1.205">
<Grid.RowDefinitions>
<RowDefinition Height="143*"/>
<RowDefinition Height="136*"/>
<RowDefinition Height="153*"/>
</Grid.RowDefinitions>
</Grid>
<Grid HorizontalAlignment="Left" Height="447" Margin="1594,3438,0,0" Grid.Row="1" VerticalAlignment="Top" Width="511">
<Grid.RowDefinitions>
<RowDefinition Height="142*"/>
<RowDefinition Height="156*"/>
<RowDefinition Height="149*"/>
</Grid.RowDefinitions>
</Grid>
<Grid HorizontalAlignment="Left" Height="452" Margin="510,3433,0,0" Grid.Row="1" VerticalAlignment="Top" Width="1084">
<Grid.RowDefinitions>
<RowDefinition Height="44*"/>
<RowDefinition Height="45*"/>
</Grid.RowDefinitions>
</Grid>
<Grid HorizontalAlignment="Left" Height="23141" Margin="20,3895,0,0" Grid.Row="1" VerticalAlignment="Top" Width="1574"/>
<Grid HorizontalAlignment="Left" Height="23540" Margin="1599,3496,0,0" Grid.Row="1" VerticalAlignment="Top" Width="506">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="14.143"/>
<ColumnDefinition Width="146.857"/>
<ColumnDefinition Width="42.714"/>
<ColumnDefinition Width="119*"/>
<ColumnDefinition Width="98*"/>
<ColumnDefinition Width="85*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="87*"/>
<RowDefinition Height="23516*"/>
</Grid.RowDefinitions>
<Label x:Name="label" Content="Hespanic" HorizontalAlignment="Left" Margin="-1,-61,0,0" VerticalAlignment="Top" Height="55" Width="506" FontSize="22" Grid.ColumnSpan="6"/>
</Grid>
<Label x:Name="label1" Content="Sample" HorizontalAlignment="Left" Margin="8,97,0,0" VerticalAlignment="Top" RenderTransformOrigin="-8.5,0.654" Width="215"/>
<Label x:Name="label2" Content="Layer" HorizontalAlignment="Left" Height="33" Margin="922,10,0,0" VerticalAlignment="Top" Width="232" FontSize="18"/>
<Label x:Name="label3" Content="Index" HorizontalAlignment="Left" Margin="1969,10,0,0" VerticalAlignment="Top" Width="105"/>
<Label x:Name="label4" Content="People" HorizontalAlignment="Left" Margin="1477,84,0,0" VerticalAlignment="Top" Width="161"/>
</Grid>
</Window>
So I'm trying to add thickness = 1, outline for grid borders, rows and columns
So I tried following thread
How do i put a border on my grid in WPF?
So to add a border I added following thing, and its working fine
<Border BorderBrush="Black" BorderThickness="2">
<Grid>
<!-- Grid contents here -->
</Grid>
</Border>
But since I have need to add thickness = 1, outline for all above multiple columns and rows also, I tried something like this
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderThickness="1" BorderBrush="Black"/>
<Border Grid.Row="0" Grid.Column="1" BorderThickness="1" BorderBrush="Black"/>
which is identifying each column and row and add thickness to them, but this seems quite time consuming and confusing work.
Is there any other proper and quick way to add BorderThickness="1" BorderBrush="Black" to all above Columns and Rows in the grids ?
In the default WPF Grid, you can set ShowGridLines="True". However these lines are meant to be designer lines, and not meant for end use.
The common solution I use is a custom GridControl which adds DependencyProperties for GridLines settings, and overrides OnRender to draw them.
public class GridControl : Grid
{
#region Properties
public bool ShowCustomGridLines
{
get { return (bool)GetValue(ShowCustomGridLinesProperty); }
set { SetValue(ShowCustomGridLinesProperty, value); }
}
public static readonly DependencyProperty ShowCustomGridLinesProperty =
DependencyProperty.Register("ShowCustomGridLines", typeof(bool), typeof(GridControl), new UIPropertyMetadata(false));
public Brush GridLineBrush
{
get { return (Brush)GetValue(GridLineBrushProperty); }
set { SetValue(GridLineBrushProperty, value); }
}
public static readonly DependencyProperty GridLineBrushProperty =
DependencyProperty.Register("GridLineBrush", typeof(Brush), typeof(GridControl), new UIPropertyMetadata(Brushes.Black));
public double GridLineThickness
{
get { return (double)GetValue(GridLineThicknessProperty); }
set { SetValue(GridLineThicknessProperty, value); }
}
public static readonly DependencyProperty GridLineThicknessProperty =
DependencyProperty.Register("GridLineThickness", typeof(double), typeof(GridControl), new UIPropertyMetadata(1.0));
#endregion
protected override void OnRender(DrawingContext dc)
{
if (ShowCustomGridLines)
{
foreach (var rowDefinition in RowDefinitions)
{
dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(0, rowDefinition.Offset), new Point(ActualWidth, rowDefinition.Offset));
}
foreach (var columnDefinition in ColumnDefinitions)
{
dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(columnDefinition.Offset, 0), new Point(columnDefinition.Offset, ActualHeight));
}
dc.DrawRectangle(Brushes.Transparent, new Pen(GridLineBrush, GridLineThickness), new Rect(0, 0, ActualWidth, ActualHeight));
}
base.OnRender(dc);
}
static GridControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(GridControl), new FrameworkPropertyMetadata(typeof(GridControl)));
}
}
It can be used like this :
<local:GridEx ShowCustomGridLines="True"
GridLineBrush="#FF38B800"
GridLineThickness="2">
...
</local:GridEx>
I am trying to add user controls to the Grid and I am trying to set the Grid.Column and Grid.Row property in the DataTemplate but it does not have any effect on the rendering. Can someone help to point out what could be wrong in the code below.
I have the main window with the following code:
<ItemsControl ItemsSource="{Binding Controls}">
<ItemsControl.ItemsPanel >
<ItemsPanelTemplate>
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<AppControls:TagInfo Grid.Row="{Binding RowIndex}"
Grid.Column="{Binding ColumnIndex}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
TagInfo.xaml.cs
public partial class TagInfo : UserControl
{
public TagInfo()
{
InitializeComponent();
}
public int RowIndex { get; set; }
public int ColumnIndex { get; set; }
}
TagInfo.xaml
<UserControl x:Class="DataSimulator.WPF.Controls.TagInfo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="258" Width="302"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Grid Margin="2,2,2,2">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Tag"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TagInfo.TagName}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="High High"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding TagInfo.HighHigh}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="High"/>
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding TagInfo.High}"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Low Low"/>
<TextBox Grid.Row="3" Grid.Column="1" Text="{Binding TagInfo.LowLow}"/>
<TextBlock Grid.Row="4" Grid.Column="0" Text="Low"/>
<TextBox Grid.Row="4" Grid.Column="1" Text="{Binding TagInfo.Low}"/>
<TextBlock Grid.Row="5" Grid.Column="0" Text="Range Start"/>
<TextBox Grid.Row="5" Grid.Column="1" Text="{Binding TagInfo.RangeStart}"/>
<TextBlock Grid.Row="6" Grid.Column="0" Text="Range End"/>
<TextBox Grid.Row="6" Grid.Column="1" Text="{Binding TagInfo.RangeEnd}"/>
<Button Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" Content="Save"/>
</Grid>
</UserControl>
ViewModel
private ObservableCollection<Controls.TagInfo> _controls
= new ObservableCollection<Controls.TagInfo>();
public ObservableCollection<Controls.TagInfo> Controls
{
get { return _controls; }
set { _controls = value; }
}
private void AddControl()
{
if(currentRow == 3)
{
currentRow = 0;
}
if(currentColumn == 3)
{
currentColumn = 0;
currentRow++;
}
var tagInfoUserControl = new Controls.TagInfo();
tagInfoUserControl.RowIndex = currentRow;
tagInfoUserControl.ColumnIndex = currentColumn++;
_controls.Add(tagInfoUserControl);
}
I am trying to add user controls to the grid and I am trying to set the Grid.Column and Grid.Row property in the data template but it does not have any effect on the rendering
We can't do the attached property binding in a DataTemplate, creating a style for your UserControl in ItemsControl.ItemContainerStyle can make it work:
<ItemsControl ItemsSource="{Binding Controls}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="AppControls:TagInfo">
<Setter Property="Grid.Row" Value="{Binding RowIndex}"/>
<Setter Property="Grid.Column" Value="{Binding ColumnIndex}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
Screenshot:
when all columns and rows have to be of equal size and elements are consequtive, it is probably simpler to use UniformGrid. Rows and Columns properties support binding.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Name="MainGrid" Rows="4" Columns="4"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
here is a nice example of Grid ItemsPanel here: WPF Grid as ItemsPanel for a list dynamically bound to an ItemsControl
I have the following xaml, where you can see a GroupBox on top and other ones on the left and on the right.
Is there a way to set the GroupBox on top so that (when I resize the window) its left and right edges are aligned respectively with the left edge of the GroupBoxes on the left and the right edge of the GroupBoxes on the right?
Edit
I'm keeping fixed the width of the groupboxes in the tab controls because I've implemented a wpf zooming there: I've updated the xaml now (of course the zoom is implemented also in the code behind)
<?xml version="1.0" encoding="utf-8"?>
<Window
x:Class="MatchWidth.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MatchWidth"
Height="1000"
Width="1600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="100" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<GroupBox
Header="Top Box"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="25,5,35,25" />
<Grid
Grid.Row="1">
<Grid.LayoutTransform>
<ScaleTransform
CenterX="0" CenterY="0"
ScaleX="{Binding ElementName=uiScaleSliderL,Path=Value}"
ScaleY="{Binding ElementName=uiScaleSliderL,Path=Value}"/>
</Grid.LayoutTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="5" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<TabControl
Name="LeftTabCtr"
Grid.Column="0">
<TabItem Header="LeftTabCtr">
<ScrollViewer
HorizontalScrollBarVisibility="Auto">
<Grid
Height="800">
<Slider
x:Name="uiScaleSliderL"
ToolTip="Determines the UI scale factor."
Value="1" Minimum="0.1" Maximum="4" Width="200" Height="10"
HorizontalAlignment="Center" VerticalAlignment="Top" />
<GroupBox
Header="Left Box 1"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="25,20,25,25"
Width="720"
Height="180"/>
<GroupBox
Header="Left Box 2"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="720"
Margin="25,220,25,10" />
</Grid>
</ScrollViewer>
</TabItem>
</TabControl>
<GridSplitter
Grid.Column="1"
Width="5"
HorizontalAlignment="Stretch" />
<TabControl
Name="RightTabCtr"
Grid.Column="2">
<TabItem Header="RightTabCtr">
<ScrollViewer
HorizontalScrollBarVisibility="Auto">
<Grid
Height="800"> <Slider
x:Name="uiScaleSliderR"
ToolTip="Determines the UI scale factor."
Value="1" Minimum="0.1" Maximum="4" Width="200" Height="10"
HorizontalAlignment="Center" VerticalAlignment="Top" />
<GroupBox
Header="Right Box 1"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="25,20,25,25"
Width="720"
Height="180"/>
<GroupBox
Header="Right Box 2"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="720"
Margin="25,220,25,10" />
</Grid>
</ScrollViewer>
</TabItem>
</TabControl>
</Grid>
</Grid>
</Window>
The code behind contains something like that:
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
uiScaleSliderL.MouseDoubleClick +=
new MouseButtonEventHandler(RestoreScalingFactorL);
}
protected override void OnPreviewMouseWheel(MouseWheelEventArgs args)
{
base.OnPreviewMouseWheel(args);
if (Keyboard.IsKeyDown(Key.LeftCtrl) ||
Keyboard.IsKeyDown(Key.RightCtrl))
{
uiScaleSliderL.Value += (args.Delta > 0) ? 0.1 : -0.1;
}
}
protected override void OnPreviewMouseDown(MouseButtonEventArgs args)
{
base.OnPreviewMouseDown(args);
if (Keyboard.IsKeyDown(Key.LeftCtrl) ||
Keyboard.IsKeyDown(Key.RightCtrl))
{
if (args.MiddleButton == MouseButtonState.Pressed)
{
RestoreScalingFactorL(uiScaleSliderL, args);
}
}
}
void RestoreScalingFactorL(object sender, MouseButtonEventArgs args)
{
((Slider)sender).Value = 1.0;
}
}
You must specify correct margins and remove constant widths of groupboxes (maybe in your case it will be more flexibile to use minWidth, or just remove it completely)
How do I set the text source for each image? I want a specific description for each image, but right now I have the same text for all of them. I was thinking of creating a folder in which to make 10 .txt files and set each image to have one of the files as a description.. but I only know how to do this theoretically. This is the instruction and the button that I'm talking about.
var files = Directory.GetFiles(#".\GalleryImages");
foreach (var file in files)
{
FileInfo fileInfo = new FileInfo(file);
WineModel wineModel = new WineModel();
wineModel.Image = new Uri(file, UriKind.Relative);
wineModel.Description = file + "text text text text text text text text text text text" +
Environment.NewLine + "text text text text text text text text text text text";
wineModel.Price = new Random().NextDouble();
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = wineModel.Image;
bi.EndInit();
var button = new KinectTileButton
{
Label = System.IO.Path.GetFileNameWithoutExtension(file),
Background = new ImageBrush(bi),
Tag = wineModel
};
this.wrapPanel.Children.Add(button);
}
This is the button
private void KinectTileButtonClick(object sender, RoutedEventArgs e)
{
var button = (KinectTileButton)e.Source;
var wineModel = button.Tag as WineModel;
var selectionDisplay = new SelectionDisplay(wineModel);
this.kinectRegionGrid.Children.Add(selectionDisplay);
e.Handled = true;
}
EDIT:this is the xaml code.. can you give me more details Stefan? I don't really understand what you're trying to say
<UserControl x:Class="Microsoft.Samples.Kinect.ControlsBasics.SelectionDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:k="http://schemas.microsoft.com/kinect/2013"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300"
Background="Transparent"
FontFamily="Segoe UI"
FontSize="30">
<!--<Grid x:Name="layoutRoot">-->
<Grid x:Name="grid" Background="{StaticResource BlueBrush}" Width="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" x:Name="Display" HorizontalAlignment="Left"
VerticalAlignment="Center" Height="185" Width="293" Margin="50,0,10,0" />
<TextBlock Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" x:Name="Description" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" MaxHeight="400" MaxWidth="500"
Margin="0,20,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="1" x:Name="Price" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="85" Width="294"/>
<Viewbox Grid.Row="0" Grid.Column="3" MaxHeight="720" MaxWidth="1280" Margin="60 60 60 60">
<Canvas Width="1280" Height="720">
<k:KinectCircleButton Style="{StaticResource CancelButtonStyle}" Canvas.Right="-153" Canvas.Top="-153"
Foreground="White" Height="200" Width="200" Click="OnCloseFullImage" />
</Canvas>
</Viewbox>
</Grid>
<!--</Grid>-->
EDIT:This is xaml code
<UserControl x:Class="Microsoft.Samples.Kinect.ControlsBasics.SelectionDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:k="http://schemas.microsoft.com/kinect/2013"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300"
Background="Transparent"
FontFamily="Segoe UI"
FontSize="30">
<!--<Grid x:Name="layoutRoot">-->
<Grid x:Name="grid" Background="{StaticResource BlueBrush}" Width="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" x:Name="Display" HorizontalAlignment="Left"
VerticalAlignment="Center" Height="185" Width="293" Margin="50,0,10,0" />
<TextBlock Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" x:Name="Description" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" MaxHeight="400" MaxWidth="500"
Margin="0,20,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="1" x:Name="Price" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="85" Width="294"/>
<Viewbox Grid.Row="0" Grid.Column="3" MaxHeight="720" MaxWidth="1280" Margin="60 60 60 60">
<Canvas Width="1280" Height="720">
<k:KinectCircleButton Style="{StaticResource CancelButtonStyle}" Canvas.Right="-153" Canvas.Top="-153"
Foreground="White" Height="200" Width="200" Click="OnCloseFullImage" />
</Canvas>
</Viewbox>
</Grid>
<!--</Grid>-->
I have a feature that allows a user to switch between the FrontFacing and Primary cameras on a device. During the switching process, I'd like to show a ProgressBar and TextBlock to the user. For some reason, I cannot get these to show up in the View, and the only thing that shows during the switching process is a frozen image of the nonrotated VideoBrush
MainPage.xaml
<Grid.RowDefinitions>
<RowDefinition Height="72"/>
<RowDefinition Height="*"/>
<RowDefinition Height="68"/>
<RowDefinition Height="72"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="72"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width="72"/>
</Grid.ColumnDefinitions>
<!-- Center this on the screen -->
<Canvas x:Name="VideoCanvas" Grid.Row="0" Grid.RowSpan="4" Grid.ColumnSpan="5"
VerticalAlignment="Center" HorizontalAlignment="Center">
<Canvas.Background>
<VideoBrush x:Name="videoBrush">
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="videoBrushTransform"
CenterX="0.5" CenterY="0.5"/>
</VideoBrush.RelativeTransform>
</VideoBrush>
</Canvas.Background>
</Canvas>
...
<StackPanel Grid.Row="1" Grid.ColumnSpan="5" VerticalAlignment="Center">
<ProgressBar x:Name="progressIndicator" IsIndeterminate="False" Background="Transparent"/>
<TextBlock x:Name="modeChangeTextBlock" Margin="12"
VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="28"
Foreground="{StaticResource PhoneSubtleBrush}"/>
</StackPanel>
MainPage.xaml.cs
void sensor_Click(object sender, EventArgs e)
{
CameraType type = camera.CameraType;
//Switch to other camera, if available
if(type == CameraType.Primary)
{
if(PhotoCamera.IsCameraTypeSupported(CameraType.FrontFacing) == true)
{
ShowProgress("Switching cameras");
UninitializeCamera();
InitializeCamera(CameraType.FrontFacing);
HideProgress();
}
}
else
{
if(PhotoCamera.IsCameraTypeSupported(CameraType.Primary) == true)
{
ShowProgress("Switching cameras");
UninitializeCamera();
InitializeCamera(CameraType.Primary);
HideProgress();
}
}
}
...
private void ShowProgress(String msg)
{
progressIndicator.IsIndeterminate = true;
modeChangeTextBlock.Text = msg;
//progressIndicator.Visibility = Visibility.Visible;
}
private void HideProgress()
{
progressIndicator.IsIndeterminate = false;
modeChangeTextBlock.Text = "";
//progressIndicator.Visibility = Visibility.Collapsed;
}
EDIT * added below existing xaml code for testing
<Rectangle x:Name="cameraSwitchingFill" Visibility="Visible"
Fill="{StaticResource SelfiePageBackgroundColorBrush}"
Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Grid.ColumnSpan="5"/>
<StackPanel Grid.Row="1" Grid.ColumnSpan="5" VerticalAlignment="Center">
<ProgressBar x:Name="progressIndicator" IsIndeterminate="True" Background="Transparent"/>
<TextBlock x:Name="modeChangeTextBlock" Margin="12"
VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="28"
Foreground="{StaticResource PhoneSubtleBrush}" Text="test"/>
</StackPanel>
The added edit is an attempt to see why the progressbar is not showing during camera switching. Setting everything to be seen on the screen, when first navigating to this page all I see is the cameraSwitchingFill rectangle, with no ProgressBar or TextBlock over it (although in the designer I can see these just fine). Upon switching the cameras, (as expected) I see the rectangle but no ProgressBar or TextBlock.
I then went back to not show the edits and modified
void sensor_Click(object sender, EventArgs e)
{
//Switch to other camera, if available
CameraType type = camera.CameraType;
if(type == CameraType.Primary)
{
if(PhotoCamera.IsCameraTypeSupported(CameraType.FrontFacing) == true)
{
ShowProgress(AppResources.CapturePage_SwitchingCameras);
cameraSwitchingFill.Visibility = Visibility.Visible;
UninitializeCamera();
InitializeCamera(CameraType.FrontFacing);
cameraSwitchingFill.Visibility = Visibility.Collapsed;
HideProgress();
}
}
else
{
if(PhotoCamera.IsCameraTypeSupported(CameraType.Primary) == true)
{
ShowProgress(AppResources.CapturePage_SwitchingCameras);
cameraSwitchingFill.Visibility = Visibility.Visible;
UninitializeCamera();
InitializeCamera(CameraType.Primary);
cameraSwitchingFill.Visibility = Visibility.Collapsed;
HideProgress();
}
}
}
So the results are when I permanently make the rectangle and Progressbar show on the screen, Only the rectangle is shown until the first camera switch click event occurs, and thereafter neither the rectangle or progressbar will show. Also, the frozen image remains on the screen during the switching even though the rectangle and progressbar, declared below the videobrush implementation in xaml, are set to visible during this time.
May this will help you. try this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Center this on the screen -->
<Canvas x:Name="VideoCanvas" Grid.Row="0" >
<Canvas.Background>
<VideoBrush x:Name="videoBrush" >
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="videoBrushTransform"
CenterX="0.5" CenterY="0.5"/>
</VideoBrush.RelativeTransform>
</VideoBrush>
</Canvas.Background>
</Canvas>
<StackPanel Grid.Row="0" VerticalAlignment="Center">
<TextBlock x:Name="modeChangeTextBlock" Margin="12" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="28" Foreground="{StaticResource PhoneSubtleBrush}"/>
<ProgressBar x:Name="progressIndicator" IsIndeterminate="False" Grid.RowSpan="4" />
</StackPanel>
</Grid>
There is nothing wrong in the declarations. Its just that the order at which you are making the declarations isnt correct.
the overlapping in grid is done by the order at which you write your xaml
In the xaml given the Panel containing textblock and progressbar is placed at first position and then the panel containing the Videobrush comes which overlaps the first panel(The main reason behind the invisibility). So, if you want the panel to be visible just declare it one level below the panel containing the videobrush. This woulf help the panel having progressbar to overlap the panel containing the videobrush.
and hence the updated declarations now becomes
<Grid.RowDefinitions>
<RowDefinition Height="72"/>
<RowDefinition Height="*"/>
<RowDefinition Height="68"/>
<RowDefinition Height="72"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="72"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width="72"/>
</Grid.ColumnDefinitions>
<!-- Center this on the screen -->
<Canvas x:Name="VideoCanvas" Grid.Row="0" Grid.RowSpan="4" Grid.ColumnSpan="5">
<Canvas.Background>
<VideoBrush x:Name="videoBrush" >
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="videoBrushTransform"
CenterX="0.5" CenterY="0.5"/>
</VideoBrush.RelativeTransform>
</VideoBrush>
</Canvas.Background>
</Canvas>
<StackPanel Grid.Row="1" Grid.ColumnSpan="5" VerticalAlignment="Center">
<ProgressBar x:Name="progressIndicator" IsIndeterminate="True" Background="Transparent"/>
<TextBlock x:Name="modeChangeTextBlock" Margin="12" Text="loading"
VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="28"
Foreground="White"/>
</StackPanel>
Hope this helps.