Stopbyte

WPF application and Responsive design

Software Development WPF
,
#1
  • How I can make my window stretching exact with this information: 10 TextBlocks on a row when I make my window bigger, 4 TextBlocks on a row and 3 rows?
  • And how I can make my window bigger and static in grid of 180?
<Viewbox Stretch="Fill" StretchDirection="Both">
    <Grid Height="360" Width="460">
        <WrapPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,299" >
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown">Keuzeitem 1</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_1">Keuzeitem 2</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_2">Keuzeitem 3</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_3">Keuzeitem 4</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_4">Keuzeitem 5</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_5">Keuzeitem 6</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_6">Keuzeitem 7</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_7">Keuzeitem 8</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_8">Keuzeitem 9</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" PreviewMouseDown="TextBlock_PreviewMouseDown_9">Keuzeitem 10</TextBlock>
        </WrapPanel>
        <Grid Height="Auto" Margin="5,61,275,167" Width="180" MinWidth="180">
            <Button Margin="0,4,100,100" x:Name="button" Content="Knop 1" Click="button_Click"/>
            <Button Margin="93,4,18,100" x:Name="button1" Content="Knop 2" Click="button1_Click"/>
            <Button Margin="0,42,18,60" x:Name="button2" Content="Knop 3" Click="button2_Click"/>
            <Button Margin="0,82,100,5" x:Name="button3" Content="Knop 4" Click="button3_Click"/>
            <Button Margin="93,82,18,33" x:Name="button4" Content="Knop 5" Click="button4_Click"/>
            <Button Margin="93,108,18,5" x:Name="button5" Content="Knop 6" Click="button5_Click"/>
        </Grid>
        <StackPanel Margin="5,300,2,5" Height="Auto" Width="Auto">
            <TextBlock  Margin="5,5,5,20" x:Name="TBResultaat" Text="Boodschap voor de gebruiker" Height="Auto" Width="Auto"/>
        </StackPanel>
        <Canvas Height="Auto" Margin="193,55,8,65" Width="Auto">
            <Ellipse  Canvas.Left="5" Canvas.Top="5" Width="114" Height="109" Fill="Blue"></Ellipse>
            <Rectangle Canvas.Left="5" Canvas.Top="125" Width="114" Height="109" Fill="Azure"></Rectangle>
            <StackPanel Canvas.Left="155" Canvas.Top="7" Height="114" Width="84">
                <TextBlock Text="IVO BRUGGE"/>
                <Image Source="/Images/ivologo.jpg" Stretch="Fill" />
                <TextBlock Text="2017-2018"/>
            </StackPanel>
            <Ellipse Canvas.Left=" 145" Canvas.Top="125" Width="114" Height="109" Fill="YellowGreen"></Ellipse>
        </Canvas>
    </Grid>
</Viewbox>
#2
  • Hi, about your question you can modify your interface layout By following the cutter down(its simple idea will help you).

image.png895×529 38.2 KB 

    <!--<Viewbox Stretch="Fill" StretchDirection="Both">-->
    <Grid  Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
        <WrapPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  >
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 1</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 2</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 3</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 4</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 5</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 6</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 7</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 8</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 9</TextBlock>
            <TextBlock Margin="5" TextWrapping="Wrap" >Keuzeitem 10</TextBlock>
        </WrapPanel>
    </Grid>
    <Grid Height="Auto"  Width="180" MinWidth="180" Grid.Row="1" Grid.Column="0"  >
        <Viewbox Stretch="Fill" StretchDirection="Both">
            <Grid>
                <Button Margin="0,4,100,100" x:Name="button" Content="Knop 1" />
                <Button Margin="93,4,18,100" x:Name="button1" Content="Knop 2" />
                <Button Margin="0,42,18,60" x:Name="button2" Content="Knop 3" />
                <Button Margin="0,82,100,5" x:Name="button3" Content="Knop 4" />
                <Button Margin="93,82,18,33" x:Name="button4" Content="Knop 5" />
                <Button Margin="93,108,18,5" x:Name="button5" Content="Knop 6" />
            </Grid>
        </Viewbox>
    </Grid>
    <StackPanel  Height="Auto" Width="Auto" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2">
        <TextBlock  Margin="5,5,5,20" x:Name="TBResultaat" Text="Boodschap voor de gebruiker" Height="Auto" Width="Auto"/>
    </StackPanel>
    <Grid  Height="Auto" Width="Auto" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2">
        <Viewbox x:Name="vws" Height="Auto" Width="Auto">
            <Canvas  Height="240" Width="260"   >
                <Ellipse  Canvas.Left="5" Canvas.Top="5" Width="114" Height="109" Fill="Blue"></Ellipse>
                <Rectangle Canvas.Left="5" Canvas.Top="125" Width="114" Height="109" Fill="Azure"></Rectangle>
                <StackPanel Canvas.Left="155" Canvas.Top="7" Height="114" Width="84">
                    <TextBlock Text="IVO BRUGGE"/>
                    <Image Source="/image/1.PNG" Stretch="Fill" />
                    <TextBlock Text="2017-2018"/>
                </StackPanel>
                <Ellipse Canvas.Left=" 145" Canvas.Top="125" Width="114" Height="109" Fill="YellowGreen"></Ellipse>
            </Canvas>
        </Viewbox>
    </Grid>
</Grid>
#3
    • If you want the viewbox for me I think the best approach can be to have a wrappanel as a panel in the list box and template set as textblocks .
  • This sample has more complex template than just a textblock, but as you stretch a window the contents of list box behave the way you describe it.
  • And the Viewbox changes the effective zoom because its contents,for example will create a problem if you put everything inside one.
  • The contents put kind of out in the length and width you specify and then amplify the size of their container.