I use on my MainPage a Pivot with 3 PivotItems.
In every PivotItem is a grid. In one of them I want to draw a hydraulic circuit. Therefore I inserted some Columns and Rows to give every element a fixed position in a cell. I need to know the size of the grid because depending on this size the lines (representing pipes of the circuit) are positioned in the middle of a cell and have the half length (or height depending on direction) of the cell.
Here you can see how it should look like in the end. Some of the lines aren´t in their right place when the Raspberry 3 is connected to another Display.
Furthermore the screen is not filled completly with the grid, as can be seen here. Under the circuit is still some white space, but with the same settings this does not happen on the other PivotItems.
When I want to get the Size of a Cell (all cells have the same size! sizing with
*) using:
double columnWidth = circuitGrid.ColumnDefinitions[0].ActualWidth;
I get as result 0.
When i use instead:
double columnWidth = circuitGrid.ColumnDefinitions[0].Width;
I get as result NaN.
The same behaviour I get using:
var circuitGridSize = new Size(circuitGrid.ActualWidth, circuitGrid.ActualHeight);
What I´ve tried:
using the UI element properties Height and ActualHeight
using Properties with and without Size Type
Putting initCircuit function into several Loaded Events
Does someone have a solution for this problem?
Thank you very much!
Here is the MainPage.xaml:
<Page
x:Class="I2cPortExpander.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:I2cPortExpander"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0">
<StackPanel>
<Pivot Margin="0" Height="769" >
<PivotItem x:Name="AutoMode1" Header="Automatikbetrieb" Margin="0">
<FlipView>
<FlipViewItem>
<Grid x:Name="Auto1Grid" Background="LightGray" Visibility="Visible">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Anzahl der zu prüfenden Kreisläufe:" Style="{ThemeResource BaseTextBlockStyle}"/>
<RadioButton x:Name="Option1Cycle" Content="1" HorizontalAlignment="Center" Checked="Option1Cycle_Checked"/>
<RadioButton x:Name="Option2Cycle" Content="2" HorizontalAlignment="Center" Checked="Option2Cycle_Checked"/>
<RadioButton x:Name="Option3Cycle" Content="3" HorizontalAlignment="Center" Checked="Option3Cycle_Checked"/>
</StackPanel>
</Grid>
</FlipViewItem>
<FlipViewItem>
<Grid x:Name="Auto2Grid" Background="LightGray" Visibility="Visible">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock TextWrapping="Wrap" Text="Festlegen der Zeiten der Prüfschritte in Minuten " Margin="0,0,0,20" FontSize="20"/>
<TextBlock x:Name="airTimeText" TextWrapping="Wrap" Text="Druckprüfung mit Luft: 0 Minuten" />
<Slider x:Name="airTimeSlider" HorizontalAlignment="Center" VerticalAlignment="Top" Width="500" Margin="0,0,0,20" TickFrequency="10" Maximum="100" TickPlacement="BottomRight" ValueChanged="airTimeSlider_ValueChanged" />
<TextBlock x:Name="cleanTimeText" TextWrapping="Wrap" Text="Spülgang: 0 Minuten"/>
<Slider x:Name="cleanTimeSlider" HorizontalAlignment="Center" VerticalAlignment="Top" Width="500" Margin="0,0,0,20" TickFrequency="10" Maximum="100" TickPlacement="BottomRight" ValueChanged="cleanTimeSlider_ValueChanged"/>
<TextBlock x:Name="oilTimeText" TextWrapping="Wrap" Text="Drückprüfung mit Öl: 0 Minuten"/>
<Slider x:Name="oilTimeSlider" HorizontalAlignment="Center" VerticalAlignment="Top" Width="500" Margin="0,0,0,20" TickFrequency="10" Maximum="100" TickPlacement="BottomRight" ValueChanged="oilTimeSlider_ValueChanged"/>
<TextBlock x:Name="flowRateTimeText" TextWrapping="Wrap" Text="Durchflussmessung: 0 Minuten"/>
<Slider x:Name="flowRateTimeSlider" HorizontalAlignment="Center" VerticalAlignment="Top" Width="500" Margin="0,0,0,20" TickFrequency="10" Maximum="100" TickPlacement="BottomRight" ValueChanged="flowRateTimeSlider_ValueChanged"/>
<TextBlock x:Name="blowTimeText" TextWrapping="Wrap" Text="Ausblasen: 0 Minuten"/>
<Slider x:Name="blowTimeSlider" HorizontalAlignment="Center" VerticalAlignment="Top" Width="500" Margin="0,0,0,20" TickFrequency="10" Maximum="100" TickPlacement="BottomRight" ValueChanged="blowTimeSlider_ValueChanged"/>
</StackPanel>
</Grid>
</FlipViewItem>
<FlipViewItem>
<Grid x:Name="Auto3Grid" Background="LightGray" Visibility="Visible">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock TextWrapping="Wrap" Text="Festlegen der Druckparameter in Bar " Margin="0,0,0,20" FontSize="20"/>
<TextBlock x:Name="desiredPressure" TextWrapping="Wrap" Text="Druckprüfung mit: 0 Bar" />
<Slider x:Name="desiredPressureSlider" HorizontalAlignment="Center" VerticalAlignment="Top" Width="500" Margin="0,0,0,20" TickFrequency="2" Maximum="20" TickPlacement="BottomRight" ValueChanged="desiredPressureSlider_ValueChanged" />
<TextBlock x:Name="breakPressure" TextWrapping="Wrap" Text="Maximaler Druckverlust während Prüfung: 0 Bar"/>
<Slider x:Name="breakPressureSlider" HorizontalAlignment="Center" VerticalAlignment="Top" Width="500" Margin="0,0,0,20" TickFrequency="1" Maximum="10" TickPlacement="BottomRight" ValueChanged="breakPressureSlider_ValueChanged"/>
<Grid>
<Button x:Name="Automatik3_Start" Content="Start" HorizontalAlignment="Right" VerticalAlignment="Stretch" Margin="10" Width="75" Click="Automatik3_Start_Click"/>
</Grid>
</StackPanel>
</Grid>
</FlipViewItem>
</FlipView>
</PivotItem>
<PivotItem x:Name="HandModus" Header="Handbetrieb" Margin="0">
<Grid x:Name="circuitGrid" Background="LightGray" Visibility="Visible" Margin="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse x:Name="pneuConOuterCirc" Grid.Column="0" Grid.Row="1" Stroke="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Ellipse x:Name="pneuConInnerCirc" Grid.Column="0" Grid.Row="1" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button x:Name="HandModeAir" Content="Luft" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Background="Gray" Click="HandModeAir_Click"/>
<Button x:Name="HandModeCycle1" Content="Kreislauf 1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="3" Grid.Row="0" Background="Gray" Click="HandModeCycle1_Click"/>
<Button x:Name="HandModeCycle2" Content="Kreislauf 2" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="3" Grid.Row="1" Background="Gray" Click="HandModeCycle2_Click"/>
<Button x:Name="HandModeCycle3" Content="Kreislauf 3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="3" Grid.Row="2" Background="Gray" Click="HandModeCycle3_Click"/>
<Button x:Name="HandModeWaySelector" Content="Pumpe RL" HorizontalAlignment="Stretch" VerticalAlignment="Top" Canvas.Left="0" Grid.Column="6" Grid.Row="5" Background="Gray" Click="HandModeWaySelector_Click"/>
<Button x:Name="HandModePump" Content="Pumpe Aus" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="2" Grid.Row="3" Background="Gray" Click="HandModePump_Click" />
<Button x:Name="HandModeMeasureSelector" Content="zu" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="4" Grid.Row="7" Background="Gray" Click="HandModeMeasureSelector_Click" />
<TextBlock Text="Werkzeug" Grid.Column="5" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform Rotation="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<Rectangle Stroke="Black" StrokeThickness="4" Grid.Column="5" Grid.Row="0" Grid.RowSpan="3"/>
<Rectangle x:Name="Line1" Grid.Column="0" Grid.Row="1" Height="10" Fill="Green" Width="48" HorizontalAlignment="Right"/>
<Rectangle x:Name="Line2" Grid.Column="2" Grid.Row="1" Height="10" Fill="Red" HorizontalAlignment="Stretch" />
<Rectangle x:Name="Line4" Grid.Column="2" Grid.Row="2" Width="65" Fill="Red" Height="10" HorizontalAlignment="Right"/>
<Rectangle x:Name="Line3" Grid.Column="2" Grid.Row="0" Fill="Red" Height="10" Width="65" HorizontalAlignment="Right"/>
<Rectangle x:Name="Line5" Grid.Column="2" Grid.Row="0" Fill="Red" Width="10" Height="65" VerticalAlignment="Bottom"/>
<Rectangle x:Name="Line6" Grid.Column="2" Grid.Row="1" Width="10" Fill="Red" VerticalAlignment="Stretch" />
<Rectangle x:Name="Line7" Grid.Column="4" Grid.Row="0" Height="10" Fill="Red" HorizontalAlignment="Stretch"/>
<Rectangle x:Name="Line8" Grid.Column="4" Grid.Row="1" Height="10" Fill="Red" HorizontalAlignment="Stretch"/>
<Rectangle x:Name="Line9" Grid.Column="4" Grid.Row="2" Height="10" Fill="Red" HorizontalAlignment="Stretch"/>
<Rectangle x:Name="Line10" Grid.Column="6" Grid.Row="0" Fill="Red" Height="10" Width="65" HorizontalAlignment="Left"/>
<Rectangle x:Name="Line11" Grid.Column="6" Grid.Row="1" Fill="Red" Height="10" Width="65" HorizontalAlignment="Left"/>
<Rectangle x:Name="Line12" Grid.Column="6" Grid.Row="2" Fill="Red" Height="10" Width="65" HorizontalAlignment="Left"/>
<Rectangle x:Name="Line13" Grid.Column="6" Grid.Row="0" Fill="Red" Width="10" Height="65" VerticalAlignment="Bottom"/>
<Rectangle x:Name="Line14" Grid.Column="6" Grid.Row="1" Grid.RowSpan="4" Fill="Red" Width="10"/>
<Rectangle x:Name="Line15" Fill="RED" Grid.Column="5" Grid.Row="5" Grid.ColumnSpan="1" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<Rectangle x:Name="Line16" Fill="RED" Grid.Column="3" Grid.Row="5" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
<Rectangle x:Name="Line17" Grid.Column="2" Grid.Row="5" Fill="Red" Height="10" Width="65" VerticalAlignment="Top" HorizontalAlignment="Right" Canvas.ZIndex="1"/>
<Rectangle x:Name="Line18" Fill="Green" Grid.Column="6" Grid.Row="5" Height="10" Width="65" HorizontalAlignment="Left" Canvas.ZIndex="1"/>
<Rectangle x:Name="Line19" Fill="Green" Grid.Column="3" Grid.Row="5" Grid.ColumnSpan="3" Height="10" HorizontalAlignment="Stretch" Canvas.ZIndex="1"/>
<Rectangle x:Name="Line20" Grid.Column="2" Grid.Row="5" Fill="Green" Height="10" Width="65" HorizontalAlignment="Right" Canvas.ZIndex="1"/>
<Rectangle x:Name="Line21" Grid.Column="2" Grid.Row="5" Fill="Green" Width="10" VerticalAlignment="Stretch" Canvas.ZIndex="1" HorizontalAlignment="Left" Margin="59,0,0,0"/>
<Rectangle x:Name="Line22" Grid.Column="2" Grid.Row="4" Fill="Green" Width="10" Canvas.ZIndex="1"/>
<Rectangle x:Name="Line23" Grid.Column="2" Grid.Row="2" Fill="Red" Width="10" Canvas.ZIndex="1"/>
<Rectangle x:Name="Line24" Grid.Column="6" Grid.Row="5" Fill="Green" Width="10" Height="50" Canvas.ZIndex="1" HorizontalAlignment="Center"/>
<Image Source="images/durchfluss.png" Grid.Column="3" Grid.Row="4" Margin="25,25,25,-10"/>
<Image Source="images/druckmesser.png" Grid.Column="5" Grid.Row="4" Margin="25,25,25,-10"/>
</Grid>
</PivotItem>
<PivotItem x:Name="Properties" Header="Einstellungen" HorizontalAlignment="Left" Margin="0">
<Grid>
</Grid>
</PivotItem>
</Pivot>
</StackPanel>
</Grid>
Here is the MainPage code:
public MainPage()
{
this.InitializeComponent();
InitDisplay();
//this funtion sets up the size of the elements
initCircuit();
// Register for the unloaded event so we can clean up upon exit
Unloaded += MainPage_Unloaded;
I2C.InitializeSystem();
}
Here is the initCircuit function:
private void initCircuit()
{
var displayInformation = DisplayInformation.GetForCurrentView();
var screenSize = new Size(displayInformation.ScreenWidthInRawPixels,
displayInformation.ScreenHeightInRawPixels);
var circuitGridSize = new Size(circuitGrid.ActualWidth,
circuitGrid.ActualHeight);
double screenWidth = screenSize.Width;
double screenHeight = screenSize.Height;
double rowHeight = circuitGridSize.Height / circuitGrid.RowDefinitions.Count;
double gridWidth = circuitGrid.Width;
//Initialisierung des Schaltplanes
//Initialisierung der Verbindungen
//Pneumatikanschluss
pneuConInnerCirc.Height = rowHeight / 2.5;
pneuConOuterCirc.Height = rowHeight / 2;
//Werkzeuganschluss
PathGeometry toolSupplyPathVL = new PathGeometry();
PathGeometry toolSupplyPathRL = new PathGeometry();
//Werkzeugsymbol
//Pumpenanschluss
PathGeometry pumpSupplyPath = new PathGeometry();
//Messzweig
PathGeometry measurePath1 = new PathGeometry();
PathGeometry measurePath2 = new PathGeometry();
//Initialisierung der Aktoren des Schaltplans
//Initialisierung der Messinstrumente
TextBlock actualPressure = new TextBlock();
TextBlock actualFlowrate = new TextBlock();
//-----------------------------------------------//
//Luftanschluss
Line1.Width = ((screenWidth / circuitGrid.ColumnDefinitions.Count) - pneuConOuterCirc.Width) / 2;
Line5.Height = (screenHeight / circuitGrid.RowDefinitions.Count + Line3.Height) / 2;
Line3.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count) / 2;
Line4.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count) / 2;
Line10.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count) / 2;
Line11.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count) / 2;
Line12.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count) / 2;
Line18.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count + Line24.Width) / 2;
Line17.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count) / 2;
Line20.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count) / 2;
Line13.Height = (screenHeight / circuitGrid.RowDefinitions.Count + Line3.Height) / 2;
HandModeWaySelector.Width = (screenWidth / circuitGrid.ColumnDefinitions.Count);
HandModeWaySelector.Height = (screenHeight / circuitGrid.RowDefinitions.Count) / 3;
// Line24.Height= (screenSize.Height / circuitGrid.RowDefinitions.Count)/2 -HandModeWaySelector.Height;
// Line24.VerticalAlignment = VerticalAlignment.Stretch;
Line24.Margin = new Thickness((screenWidth / circuitGrid.ColumnDefinitions.Count - Line24.Width) / 2, HandModeWaySelector.Height / 2, (screenWidth / circuitGrid.ColumnDefinitions.Count - Line24.Width) / 2, (screenHeight / circuitGrid.RowDefinitions.Count) / 2);
Line21.Margin = new Thickness((screenWidth / circuitGrid.ColumnDefinitions.Count - Line24.Width) / 2, 0, (screenWidth / circuitGrid.ColumnDefinitions.Count - Line24.Width) / 2, (screenHeight / circuitGrid.RowDefinitions.Count) / 2 - Line20.Height / 2);
Line15.Margin = new Thickness(0, (HandModeWaySelector.Height / 2 - Line15.Height) / 2, 0, screenHeight / circuitGrid.RowDefinitions.Count - (HandModeWaySelector.Height - Line15.Height / 2));
Line16.Margin = Line15.Margin;
Line17.Margin = new Thickness((screenWidth / circuitGrid.ColumnDefinitions.Count) / 2, (HandModeWaySelector.Height / 2 - Line15.Height) / 2, 0, screenHeight / circuitGrid.RowDefinitions.Count - (HandModeWaySelector.Height - Line15.Height / 2));
}
You should not rely on any measure until the "measuring process" is performed (and stable). Try move the initCircuit call inside a MainPage Loaded handler. You should gain some result.
EDIT: A better approach:
public MainPage()
{
this.InitializeComponent();
this.circuitGrid.SizeChanged += circuitGrid_SizeChanged;
}
private void circuitGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
//check for valid size
//if (valid) {
// initCircuit()
//}
}
private void initCircuit()
{
//
}
The idea is to "listen" every single grid size change, then evaluate whether to draw or not. The validation is straight to check for NaN or something numeric. I recommend to perform a quick test as validation before doing the concrete initCircuit. That's because you might see a tight sequence of SizeChanged calls, during the initial rendering process.
Not a bullet-proof solution, but at this point you should see the things begin to work.
From the code you provided,the positions of lines are calculated from screenSize which is the size of current app's view.The result of GetForCurrentView is the physical display resolution(please note that, it is not the display resolution).I think the positions should be calculated from circuitGrid.Please refer to the following code:
private void initCircuit()
{
...
double screenWidth = circuitGridSize.Width;
double screenHeight = circuitGridSize.Height;
...
}
In addition, the height of the Pivot is fixed as 769, it will affect the adaptability of the positions. It is better if it configured to fill the StackPanel vertically.
Related
I have viewlist in which contain elements. When I click on them, my ItemViewModel handler clicks. Then I can select information about that element. Afthe I must to open new page in which will be all information about it. For example like hypertext in browser.
<Border MaxHeight="300" MaxWidth="1140" CornerRadius="25" Margin="73,269,65,182">
<Grid x:Name="MainGrid" RenderTransformOrigin="0.5,0.5" Margin="0,0,10,-3">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListView Width="1031" ItemsSource="{Binding GetTopItem}"
ScrollViewer.VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#DD000000"
x:Name="ListBook">
<ListView.DataContext>
<vm:BookMainVM/>
</ListView.DataContext>
<ListView.ItemTemplate>
<DataTemplate>
<Border HorizontalAlignment="Left" CornerRadius="25,25,25,25" BorderThickness="1" BorderBrush="#FF474747" Height="288" Margin="0,0,0,0" MouseDown="Border_MouseDown" >
<Grid Grid.Column="0" Height="Auto" Width="216" Margin="-1" IsEnabled="False">
<Grid.InputBindings>
<MouseBinding Gesture="LeftClick"
Command="{Binding DataContext.DelegateCommands,
RelativeSource={RelativeSource AncestorType=ListView}}"
CommandParameter="{Binding}">
</MouseBinding>
</Grid.InputBindings>
<Grid.RowDefinitions>
<RowDefinition Height="49*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<Border CornerRadius="25,25,0,0" RenderTransformOrigin="0.5,0.5">
<Border.Background>
<ImageBrush ImageSource="{Binding Img_src}" Stretch="Fill" />
</Border.Background>
</Border>
<Label Content="{Binding Rate}" Background="#FFBFBFBF" RenderTransformOrigin="0.5,0.5" Grid.Row="1" FontSize="11" FontFamily="Meiryo UI" HorizontalContentAlignment="Center"/>
<Border CornerRadius="0,0,25,25" Grid.Row="2" Background="#FF8F8F8F">
<TextBlock Margin="6,0,0,0" Text="{Binding Name}" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="2" Height="61" Width="190"/>
</Border>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Border>
class ItemMainVM:ViewModel
{
private LibraryModel libraryModel;
private ItemDb itemsDb;
private const string Dir = "D:\\repos\\Frame\\Frame\\src";
public ItemMainVM()
{
libraryModel = new LibraryModel();
itemsDb = new BooksDb();
DelegateCommands = new DelegateCommand(o => EventHandler(o));
}
public ObservableCollection<BookPreviewInfo> GetTopItem
{
get
{
return libraryModel.GetTopItems();
}
}
public ICommand DelegateCommands { get; }
public void EventHandler(dynamic item)
{
itemDb.SelectItemId(item.Id);
}
}
Code Behind is empty.
When I click an element and executing EventHandler in ItemMainVM. And next must be create new page with new ElementViewModel.
ElementViewModel should to get information about element in ItemMainVM.
trying to get an image from image array to span over two buttons that I have set up in a 5x5 grid. Based on a randomly generated 2D grid, images are placed in places on the button grid. If a position in the array = 2 then a 2 square long image is to be placed and the same for r = 3.
//This is if button (1,1) is pressed
private void _1_1_Click(object sender, RoutedEventArgs e)
{
if (radar.IsChecked == true)
{
if (gridarray[0,0] == 1)
{
Random rnd = new Random();
int r = rnd.Next(0,3);
_1_1.Content = images[r];
streak.Content = streakn++;
}
if (gridarray[0,0] == 2 || gridarray[0,1] == 2)
{
Random rnd = new Random();
int r = rnd.Next(3, 5);
_1_1.Content = images[r];
streak.Content = streakn++;
}
if (gridarray[0,0] == 3 || gridarray[0,1] == 3 || gridarray[0,2] == 3)
{
Random rnd = new Random();
int r = rnd.Next(5, 7);
_1_1.Content = images[r];
streak.Content = streakn++;
}
}
// here is where the image array is defined
private void defineImages()
{
images[0].Source = new BitmapImage(new Uri("Resources/small1.png", UriKind.Relative));
images[1].Source = new BitmapImage(new Uri("Resources/small2.jpg", UriKind.Relative));
images[2].Source = new BitmapImage(new Uri("Resources/small3.png", UriKind.Relative));
images[3].Source = new BitmapImage(new Uri("Resources/medium-1.jpg", UriKind.Relative));
images[4].Source = new BitmapImage(new Uri("Resources/medium2.jpg", UriKind.Relative));
images[5].Source = new BitmapImage(new Uri("Resources/large1.png", UriKind.Relative));
images[6].Source = new BitmapImage(new Uri("Resources/large2.jpg", UriKind.Relative));
}
// This is some relevant xaml
<TextBlock Grid.Row="0" Grid.Column="0" Margin="5" FontSize="15">Fish Caught:</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" Margin="5" FontSize="15">Guess Streak:</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0" Margin="5" FontSize="15">Fish in Water:</TextBlock>
<Label Grid.Row="0" Grid.Column="1" Margin="5" FontSize="20" x:Name="caught"></Label>
<Label Grid.Row="1" Grid.Column="1" Margin="5" FontSize="20" x:Name="streak"></Label>
<Label Grid.Row="2" Grid.Column="1" Margin="5" FontSize="20" x:Name="fishinwater"></Label>
<Label Grid.Row="0" Grid.Column="2" Content="Timer:" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25"/>
<Label Grid.Column="3" Grid.ColumnSpan="2" Grid.Row="0" Content="Tool Select:" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25"/>
<RadioButton x:Name="rod" Grid.Row="1" Grid.Column="3" Content="Rod" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/>
<RadioButton x:Name="radar" Grid.Row="1" Grid.Column="4" Content="Radar" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/>
<Button x:Name="_1_1" Grid.Row="3" Grid.Column="0" Background="White" Click="_1_1_Click">
<Image x:Name="_1"/>
</Button>
<Button x:Name="_1_2" Grid.Row="3" Grid.Column="1" Background="White">
<Image x:Name="_1_2image"/>
</Button>
<Button x:Name="_1_3" Grid.Row="3" Grid.Column="2" Background="White">
<Image x:Name="_1_3image"/>
</Button>
<Button x:Name="_1_4" Grid.Row="3" Grid.Column="3" Background="White">
<Image x:Name="_1_4image"/>
</Button>
<Button x:Name="_1_5" Grid.Row="3" Grid.Column="4" Background="White">
<Image x:Name="_1_5image"/>
</Button>
<Button x:Name="_2_1" Grid.Row="4" Grid.Column="0" Background="White">
<Image x:Name="_2_1image"/>
</Button>
<Button x:Name="_2_2" Grid.Row="4" Grid.Column="1" Background="White">
<Image x:Name="_2_2image"/>
</Button>
<Button x:Name="_2_3" Grid.Row="4" Grid.Column="2" Background="White">
<Image x:Name="_2_3image"/>
</Button>
<Button x:Name="_2_4" Grid.Row="4" Grid.Column="3" Background="White">
<Image x:Name="_2_4image"/>
</Button>
<Button x:Name="_2_5" Grid.Row="4" Grid.Column="4" Background="White">
<Image x:Name="_2_5image"/>
</Button>
<Button x:Name="_3_1" Grid.Row="5" Grid.Column="0" Background="White">
<Image x:Name="_3_1image"/>
</Button>
<Button x:Name="_3_2" Grid.Row="5" Grid.Column="1" Background="White">
<Image x:Name="_3_2image"/>
</Button>
<Button x:Name="_3_3" Grid.Row="5" Grid.Column="2" Background="White">
<Image x:Name="_3_3image"/>
</Button>
<Button x:Name="_3_4" Grid.Row="5" Grid.Column="3" Background="White">
<Image x:Name="_3_4image"/>
</Button>
<Button x:Name="_3_5" Grid.Row="5" Grid.Column="4" Background="White">
<Image x:Name="_3_5image"/>
</Button>
<Button x:Name="_4_1" Grid.Row="6" Grid.Column="0" Background="White">
<Image x:Name="_4_1image"/>
</Button>
<Button x:Name="_4_2" Grid.Row="6" Grid.Column="1" Background="White">
<Image x:Name="_4_2image"/>
</Button>
<Button x:Name="_4_3" Grid.Row="6" Grid.Column="2" Background="White">
<Image x:Name="_4_3image"/>
</Button>
<Button x:Name="_4_4" Grid.Row="6" Grid.Column="3" Background="White">
<Image x:Name="_4_4image"/>
</Button>
<Button x:Name="_4_5" Grid.Row="6" Grid.Column="4" Background="White">
<Image x:Name="_4_5image"/>
</Button>
<Button x:Name="_5_1" Grid.Row="7" Grid.Column="0" Background="White">
<Image x:Name="_5_1image"/>
</Button>
<Button x:Name="_5_2" Grid.Row="7" Grid.Column="1" Background="White">
<Image x:Name="_5_2image"/>
</Button>
<Button x:Name="_5_3" Grid.Row="7" Grid.Column="2" Background="White">
<Image x:Name="_5_3image"/>
</Button>
<Button x:Name="_5_4" Grid.Row="7" Grid.Column="3" Background="White">
<Image x:Name="_5_4image"/>
</Button>
<Button x:Name="_5_5" Grid.Row="7" Grid.Column="4" Background="White">
<Image x:Name="_5_5image"/>
</Button>
<Label x:Name="timer" FontSize="30" Grid.RowSpan="2" Grid.Row="1" Grid.Column="2" Margin="5" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="0"/>
Ignore the image tags they are not in use images are going directly into buttons.
I have a problem I can not solve.
As you can see in the picture , there is a label , a textobx and a ScrollViewer .
Now , I have to update the ScrollViewer when the user searches through the textbox .
Part of an event every time you make a keydown .
So if I write Statut ... should put first in the file list with the names "statuto rai"
the list can have N elements
Image list:
Xaml code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="GhostWhite"/>
<Grid Grid.Row="1" Background="Gray"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Documenti allegati</TextBlock>
<Border Grid.Row="1" Margin="3" BorderBrush="White" Height="22" Background="#fff">
<TextBox BorderBrush="#465E76" KeyDown="TextBox_KeyDown" BorderThickness="0" FontSize="10" Background="#fff" Foreground="#565656" controls:TextBoxHelper.Watermark="Ricerca Locale" FontFamily="{StaticResource Lato Thin}" HorizontalContentAlignment="Center" ></TextBox>
</Border>
<ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Hidden" PanningMode="Both" Name="scrollDocuments">
<ItemsControl ItemsSource="{Binding Path=attachmentsList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Column="0" Grid.Row="0">
<Button Grid.ColumnSpan="2">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="450"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#fff"></Grid>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="10,3,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding contList}"/>
<Image Source="/Resources/Images/icon-document-browser.png" HorizontalAlignment="Left" Margin="22,-12,0,0" Width="22"/>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="21,32,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding FileSizeConverted}"/>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" Margin="55,-10,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding Name}"/>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="12" Margin="55,-10,10,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding ModifiedDate}"/>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="10" Margin="55,25,10,0" FontWeight="Bold" Style="{DynamicResource Lato-Semibold}" Text="Nessuna copia locale"/>
<Border Grid.Row="0" Grid.ColumnSpan="2" BorderBrush="#DDD" BorderThickness="0,0,0,1"></Border>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<Viewbox Grid.Row="2" Name="testoNessunAllegato" Visibility="Collapsed" Margin="20">
<TextBlock Text="Nessun allegato disponibile."></TextBlock>
</Viewbox>
</Grid>
CodeBehind event code:
private void TextBox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
string find = ((TextBox)sender).Text;
attachmentsList = attachmentsList.Where(x => x.Name == find).ToList();
InitializeComponent();
}
in practice I do the intelligiente research, so every time I insert a letter filtrale list , and print it again , of course real time .
I hope I explained myself .
Thank you
I see you use bindings, in this case there is a much better stuff to reach your goal. It's CollectionView.
Here is a simple app for you which more or less fullfill your requirements:
View
<StackPanel Orientation="Horizontal">
<Label Content="Search" />
<TextBox MinWidth="30" Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
<ListBox ItemsSource="{Binding Data}" />
UpdateSorceTrigger=PropertyChanges updates FilterText in ViewModel every time when you press any key.
Data is a ICollectionView
ViewModel
public ICollectionView Data { get; private set; }
...
// Create default view for the list
Data = CollectionViewSource.GetDefaultView(list);
// Set filter delegate for CollectionView
Data.Filter = FilterData;
....
private bool FilterData(object obj)
{
DataContainer cont = (DataContainer)obj;
return string.IsNullOrEmpty(FilterText) || cont.Name.StartsWith(FilterText, StringComparison.OrdinalIgnoreCase);
}
private string myfiltertext;
public string FilterText
{
get { return myfiltertext; }
set
{
myfiltertext = value;
// Refresh collection view after Filter text modification
Data.Refresh();
}
}
I wrote function for droping list items:
private void grid1_Drop(object sender, RoutedEventArgs e)
{
TextBlock textBlock = e.Source as TextBlock;
Console.WriteLine("drop item into grid column:{0} row:{1}",
Grid.GetColumn(textBlock), Grid.GetRow(textBlock));
DataObject item = (((DragEventArgs)e).Data) as DataObject;
ListBoxItem listItem = item.GetData(typeof(ListBoxItem)) as ListBoxItem;
Window1 second = new Window1();
second.ShowDialog();
//textBlock.Height = textBlock.Height*second.getBrCasova();
Grid.SetRowSpan(textBlock, second.getBrCasova());
textBlock.Background = Brushes.Gray;
string pom = "";
if(second.getBrCasova() == 1)
textBlock.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
else
for (int i = 0; i < second.getBrCasova();i++ )
pom += "\n";
textBlock.Text = pom + listItem.Content.ToString() + "\n" + second.getUcionica();
textBlock.TextAlignment = System.Windows.TextAlignment.Center;
textBlock.Margin = new Thickness(0,0,2,2.5);
}
the problem is, if I get Grid.SetRowSpan(textBlock, second.getBrCasova()), second.getBrCasova>2, borders between cells wont be deleted.
This part of xaml show how I make table of textblocks:
<Border Grid.Column="1" Grid.Row="1" BorderBrush="Black" BorderThickness="0,0,2,2" Background="Transparent" />
<Border Grid.Column="2" Grid.Row="1" BorderBrush="Black" BorderThickness="0,0,2,2" Background="Transparent" />
<Border Grid.Column="3" Grid.Row="1" BorderBrush="Black" BorderThickness="0,0,2,2" Background="Transparent" />
<Border Grid.Column="4" Grid.Row="1" BorderBrush="Black" BorderThickness="0,0,2,2" Background="Transparent" />
<Border Grid.Column="5" Grid.Row="1" BorderBrush="Black" BorderThickness="0,0,2,2" Background="Transparent" />
<Border Grid.Column="6" Grid.Row="1" BorderBrush="Black" BorderThickness="0,0,2,2" Background="Transparent" />
<TextBlock Grid.Row="1" Grid.Column="1" Name="TextBlock11" AllowDrop="True" PreviewMouseLeftButtonDown="TextBlock11_PreviewMouseLeftButtonDown"></TextBlock>
<!--<Rectangle Grid.Column="2"
Grid.Row="1"
Stroke="Black"
Fill="Transparent" />-->
<TextBlock Grid.Row="1" Grid.Column="2" AllowDrop="True"></TextBlock>
<!--<Rectangle Grid.Column="3"
Grid.Row="1"
Stroke="Black"
Fill="Transparent" />-->
<TextBlock Grid.Row="1" Grid.Column="3" AllowDrop="True"></TextBlock>
<!--<Rectangle Grid.Column="4"
Grid.Row="1"
Stroke="Black"
Fill="Transparent" />-->
<TextBlock Grid.Row="1" Grid.Column="4" AllowDrop="True"></TextBlock>
....
How to remove this borders from function?
Thanks in advance.
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.